2022-07-19

一）Hook 为了解决什么问题？
1.在组件之间复用状态逻辑困难
我们之前解决此类问题可以使用 render props 和 高阶组件。但是这种方案需要重新组织组件结构，这可能会很麻烦，并且会使代码难以理解。由 providers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。
2.复杂组件变得难以理解
在组件中，每个生命周期常常包含一些不相关的逻辑。而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
3.难以理解的 class 组件；this 问题；
优点：
hook让我们把面向生命周期编程变成了面向业务逻辑编程。
业务组件的封装方式可以修改成 Hooks + UI Component。

react历次版本迭代主要想解决的是两类导致网页卡顿的问题，分别是cpu密集型任务和io密集型任务导致的卡顿问题

可以看到，在 React 17 的两次迭代中，都是只更新了补丁号，并且都是一些比较细节的更新，直到一年半之后的今天 React 18 正式版发布，React 17 都没有任何更新，所以 React 17 也被称为 垫脚石版本。

今天，我们就从开发者的角度来探索下 React 18 的一些新特性。

批处理是指为了获得更好的性能，在数据层，将多个状态更新批量处理，合并成一次更新，在视图层，将多个渲染合并成一次渲染。

Fiber 是 React 16 对 React 核心算法的一次重写。Fiber 会使原本同步的渲染过程变成异步的。
因为我们知道 JavaScript 是单线程，每个同步任务不能耗时太长，不然程序就不会对其他输入作出响应，而 JS 线程和渲染线程是互斥的，意味着当一个执行时，另一个会被挂起等待。

穿插 - 卡顿原因：
大家知道我们的页面是一帧一帧绘制出来的，我们浏览器的刷新频率，一般是60Hz， 即每 16毫秒左右就会通过渲染引擎刷新一次页面。如果 JS 引擎线程一次性执行了一个长时间（大于16毫秒）的同步任务，就会出现卡顿的现象。
回头再说：fiber

由于虚拟dom是树结构，被打断后无法恢复之前任务继续执行，所以需要一种新的数据结构，即fiber的链表结构，链表可以包含多个指针，可以轻松找到下一个节点，从而恢复任务执行，Fiber采用的链表包含3个指针，return指向父Fiber节点,child指向儿子Fiber节点，sibling指向兄弟Fiber节点。因此具有保存工作进度的能力。
翻页
Fiber 会将原本耗时很长的同步任务分成多个耗时短的小任务。每当执行完一个任务时，渲染线程都会把主线程交回去，看看有没有优先级更高的工作要处理，进而避免同步渲染带来的卡顿。此时，渲染线程是可以被打断的，这就是所谓的“异步渲染”。
fiber总结
支持增量渲染，fiber将react中的渲染任务拆分到每一帧。（不是一口气全部渲染完，走走停停，有时间就继续渲染，没时间就先暂停）
支持暂停，终止以及恢复之前的渲染任务。（没渲染时间了就将控制权让回浏览器）
通过fiber赋予了不同任务的优先级。（让优先级高的运行，比如事件交互响应，页面渲染等，像网络请求之类的往后排）
支持并发处理（结合第3点理解，面对可变的一堆任务，react始终处理最高优先级，灵活调整处理顺序，保证重要的任务都会在允许的最快时间内响应）

concurrent带来的变动可以概括为以下两点：

时间分片
该模式下当更新任务的render过程无法在浏览器的一帧内完成时，会被分为多个task进行可中断的更新，以此来保证浏览器每一帧都有空余时间进行绘制，可以说时间分片是concurrent的实现基础。

更新优先级
该模式下更新任务会带有优先级，低优先级任务的执行将让位于高优先级任务。
为什么会有优先级，有句话叫世界上本来没有路，走的人多了，就有了路。
那么在react的任务中，本来没有优先级，任务多了，也就有了优先级。

总结：
开启并发特性后更新任务将带有优先级，click事件的更新优先级高于接口请求的更新优先级，因而前者会打断后者的render过程优先执行。

举个例子：搜索引擎的关键词联想。一般来说，对于用户在输入框中输入都希望是实时更新的，如果此时联想词比较多同时也要实时更新的话，这就可能会导致用户的输入会卡顿。这样一来用户的体验会变差，这并不是我们想要的结果。
我们将这个场景的状态更新提取出来：一个是用户输入的更新；一个是联想词的更新。这个两个更新紧急程度显然前者大于后者。

一方面：startTransition 的处理逻辑和 setTimeout 有一个很重要的区别，setTimeout 是异步延时执行，而 startTransition 的回调函数是同步执行的。Transition 可以理解成比 setTimeout 更早的更新。
另一方面， setTimeout 它与用户交互同样属于宏任务，所以仍然会阻止页面的交互。那么 transition 就不同了，在并发模式下，startTransition 是可以中断渲染的 ，所以它不会让页面卡顿，React 让这些任务，在浏览器空闲时间执行，所以输入内容时，startTransition 会优先处理 input 值的更新，而之后才是列表的渲染。