react

fiber
- 浏览器一帧要处理的工作

fiber

为了使react 渲染的过程中可以被中断，可以将控制权交给浏览器，让位给优先级高的任务，浏览器空闲后再回复渲染
如果有大量dom操作或者大量的js计算，就不会显得特别卡顿，一帧一帧的有序执行

以一个合理的时间来判断是否有高优任务
requestIdleCallback:使浏览器再有空的时间执行我们的回调，这个回调会传入一个参数，标识浏览器有多少空的时间
浏览器一帧要处理的工作

1、处理用户的输入时间
2、js执行
3、requestAnimation调用
4、布局 layout
5、绘制paint

为什么不用generator?
修改麻烦，都要改成 * 的函数
需要完全掌握控制权
generator内部是有状态的
剩余时间就是空闲时间

浏览器很忙怎么办？

requestIdleCallback 有一个timeout参数，超过这个时间后，回调还没执行，就会再下一帧强制执行回调

requestIdleCallback 兼容性? 很不好
messageChannel 模拟实现了requestIdleCallback 的功能

超过timeout 就一定要执行妈？不是
react 预定了5个优先级的等级

Inmediate ：立即执行，优先级最高
UserBlocking ：用户交互结果，需要即时得到反馈
Normal ：不需要用户立即感觉到变化，比如请求
low ：可以延后，但是最终必须要执行
Idle :可以被无限期延后

同一优先级的任务，按照推入顺序执行

什么是高阶组件？什么是高阶组件？能用来做什么？
HOC
一个函数，入参是原来的react组件，返回值：新的react 组件
纯函数，不应该有任何的副作用

写法？
1、普通方式
2、装饰器
3、多个高阶组件组合

能做什么？

1、属性代理
1.1 操作props？
1.2 操作组件实例？渲染劫持，点击劫持

继承，劫持

什么是react hooks? 优势？
可以不写class组件的情况下，使用state 和其他 react特性
为什么不写class了?hooks优势

class缺点：
1、组件间的状态逻辑很难复用
组件间如果有state 的逻辑是相似的，class 模式下基本上是使用高阶组件来解决的，虽然能够解决，但是我们需要在组件外部再包一层元素，会导致层级非常复杂
2、复杂业务的有状态组件会越来越复杂
3、监听和定时器的操作，分散在多个生命周期
4、this指向问题：不是箭头函数的话需要使用 bind(this)

<ChildComponent onClick={this.handleClick.bind(this)}></ChildComponent>
//点击事件每次点击都会返回一个新的函数（bind每次都会返回一个新的函数），
//造成ChildComponent 无意义的渲染
<ChildComponent onClick={this.handleClick}></ChildComponent>
handleClick = ()=>{ //定义的时候就决定了this指向
}
<ChildComponent onClick={()=>{this.handleClick()}}></ChildComponent>

hooks优点？
1、利于业务逻辑的封装和拆分，可以非常自由的组合各种自定义的hooks.(自己封装用到了react hooks的公共逻辑)
2、可以在无需修改组件结构的情况下，复用状态逻辑
3、定时器，监听等都被聚合在同一块代码下

注意事项？
1、只能在函数内部的最外层调用 hook,不要在循环，条件判断或者子函数中调用
？
取值会出现偏移，，不懂


//实现useState
//链表 ，数组

2、只能在react的函数组件中调用hook,不要再其他的js函数里调用

为什么useEffect的第二个参数是数组，就相当于componentDidMount只执行一次？

自定义的hook怎样操作组件的？

fiber

浏览器一帧要处理的工作