桃子阿桃

1. {}里面可以放的内容必须有返回值import React from 'react'; //解释 jsx 语法, 并转译虚拟 dom 对象import ReactDOM from 'react-dom';ReactDOM.render( <div> <h1>hello,world!</h1> </div>, document.getElementById('app'))...

// 当一个组件只有一个 render 函数的时候, 它就是无状态组件.// 可以用无状态组件替换掉 class 组件// 无状态组件也称为函数组件无状态组件的优点:性能较高. 原因: 因为它就是一个函数, 而普通组件它是一个 JS里的类, 这个类生成的对象里面会有一些生命周期函数, 它执行起来既要执行生命周期函数, 又要执行 render. 所以它执行的东西要比函数执行的多.无状态组件的使用场景:当我们去定义一个 UI 组件的时候, 它只负责页面渲染的时候. 没有或者较少进行逻辑操作的时候可以

Redux = Reducer + FluxFlux 的缺点:公共存储区域 store 可以有很多个, 这样会出现数据依赖的现象Redux 的工作流程:

react-transition-group 参数<CSSTransition in={this.state.show} timeout={1000} classNames='fade' unmountOnExit onEntered={(el) => {}} appear={true}></CSSTransition>in参数: CSSTransition 自动往 div 上加样式, 那么它要知道何时该增加什么样式. 用来感知当前动画的状态

生命周期函数指在某一个时刻组件会自动调用执行的函数constructor当组件创建的时刻会被组件自动调用执行, 它也是初始化的位置. 在这里定义 state, 接收 props, 但是它是 ES6 语法中就带的render 函数当数据(state 和 props 发生改变)发生变化的时刻组件会自动调用执行, 所以它就是个生命周期函数...

帮助我们在 react 里面直接获取 dom 元素使用的, 一般情况下尽量不用.在做复杂业务比如动画, 不可避免要用到页面标签时, 可以用 ref.ref 和 setState 合用的时候, 会出现一些坑, dom 获取不及时, 因为 setState 是异步的.如果希望页面更新后获取 dom , 要把获取 dom 的代码放在 setState 的第二个参数的函数里, 它是一个回调函数...

定义 state,有了数据有一个模板数据 + 模板生成虚拟 DOM(虚拟 DOM 就是一个 js对象, 用它来描述真实 DOM)用虚拟 DOM 的结构生成真实的 DOM, 来显示state 发生变化数据 + 模板 生成新的虚拟 DOM (极大地提升性能)比较原始虚拟 dom和原始虚拟 dom的区别, 找到区别是 span 中内容直接操作 DOM, 改变 span 中的内容那第七步是如何比对的, 采用的就是 diff 算法.什么时候会被比对? :当数据发生改变的时候, 虚拟 DOM 才.

我们都知道 react 中 state 发生改变, render 函数重新执行渲染页面自己实现这个功能的思路?定义 state,有了数据有一个模板数据 + 模板 结合, 生成真实 dom, 显示state 发生改变数据 + 模板 结合, 生成真实 dom, 替换原始的 dom缺陷:第一次生成了一个完整的 DOM 片段,第二次生成了一个完整的 DOM 片段,第二次的 DOM 替换第一次的 DOM, 非常耗性能(仅有一部分数据发生改变, 但是要生成和替换全部的 DOM 片段)改良:

yarn.lock 项目依赖安装包版本号 不用动README.md 项目说明文件 可以自己改写index.html 首页模板manifest.json 定义PWA的文件src目录 项目源代码文件夹index.js 项目入口文件 （从index.js开始逐行执行）App.js...

全称:Progressive Web App 渐进式网络应用具体业务上的部署并非一蹴而就, 可以循序渐进的实现它, 每次实现一部分, 这个特性降低了业务的部署成本, 也适应了浏览器厂商的更新节奏, 更容易被开发者接受==PWA 如何实现渐进式? ==PWA 组成技术及特性:Service Worker 服务工作线程.常驻内存运行代理网络请求依赖 https就是 pwa 的大脑区别于 webworker 独立于浏览器主线程的环境, 一般用来计算复杂的计算操作, 不阻塞页面渲染in

什么是 Hooks?Hooks let you use state and other React features without writing a class以往 react 的组件都是以 class 形式编写, 只有无状态组件才可以用函数来编写.Hooks 就允许我们在函数组件中使用预定义的内部函数来标记状态和组件生命周期, 使得几乎所有组件都可以用函数来编写以前类组件的不足状态逻辑复用难缺少复用机制渲染属性和高阶组件导致层级冗余趋向复杂难以维护生命周期函数混杂不相干逻辑相

1. Typo in static class property declaration react/no-typos问题： 大小写写错解决：应改为小写 PriceList.propTypes

1. 函数式编程一种编程范式, 概念较多纯函数 ( 返回新值是纯函数最重要的特点之一 )不可变值 ( setState和redux中的action的时候都是使用不可变值 )2. vdom和diff算法h函数vnode数据结构:patch函数Diff算法只比较同一层级, 不跨级比较. tag不同, 直接删掉重建, 不再深度比较tag和key, 两者都相同, 就认为是相同节点, 不再深度比较Vue2.x Vue3.0 React三者实现vdom细节都不同, 但核心概念和思路一样3. J

1. redux中间件到底是什么?首先这是正常操作redux的流程图.触发一个元素的回调, 事件触发dispatch, dispatch会传action给reducer, reducer会产生新state, 被redux监听后触发新view渲染, view渲染后有可能用户再次触发新button按钮再来一次单项数据流.如果我们想在这个循环中插入一些公共逻辑, 在哪里插入? reducer是个纯函数, 接收action返回新state. 逻辑简单结构统一, 因此不能在reducer里加, 在view也不