关于javascript:小推理React18比老版React更优秀的一个地方

大家好，我卡颂。

React18曾经进入 RC(release candidate) 阶段，间隔正式版只有一步之遥了。

v18新增了很多个性，明天，咱们不聊新个性，而是来讲讲 v18 相比老版更优良的一个细节：

v18 中，组件 render 的次数可能更少

欢送退出人类高质量前端框架群，带飞

在如下组件中：

function App() {const [num, update] = useState(0);
  // ... 省略
}

App组件 render 后会执行 useState，返回num 的最新值。

也就是说，组件必须render，能力晓得最新的状态。为什么会这样呢？

思考如下触发更新的代码：

const [num, update] = useState(0);
const onClick = () => {update(100);
  update(num => num + 1);
  update(num => num * 3);
}

onClick执行后触发更新，更新导致 App 组件 render，进而useState 执行。

在 useState 外部，会遵循如下流程计算num：

update(100)将 num 变为100
update(num => num + 1)将 num 变为100 + 1 = 101
update(num => num * 3)将 num 变为101 * 3 = 303

即，App组件 render 时，num为 303。

所以，状态的计算须要先收集 触发的更新 ，再在useState 中对立计算。

对于上述例子，将更新别离命名为 u0～u2，则状态的计算公式为：

baseState -> u0 -> u1 -> u2 = newState

Concurrent（并发）为 React 带来了 优先级 的概念，反映到 状态计算 上，依据触发更新的场景，更新领有不同优先级（比方 onClick 回调中触发的更新优先级高于 useEffect 回调中触发的更新）。

体现在计算状态中的区别就是，如果某个更新优先级低，则会被跳过。

假如上述例子中 u1 优先级低，那么 App 组件 render 时，计算 num 状态的公式为：

// 其中 u1 因为优先级低，被跳过
baseState -> u0 -> u2 = newState

即：

update(100)将 num 变为100
update(num => num * 3)将 num 变为100 * 3 = 300

显然这个后果是不对的。

所以，并发状况下 React 计算状态的逻辑会更简单。具体来讲，可能蕴含多轮计算。

当计算状态时，如果某次 更新 被跳过，则下次计算时会从被跳过的 更新 持续往后计算。

比方上例中，u1被跳过。当 u1 被跳过期，num为 100。此时的状态 100，以及 u1 和他前面的所有更新 都会保留下来，参加下次计算。

在例子中即为 u1、u2 保留下来。

下次更新的状况如下：

初始状态为 100，update(num => num + 1) 将num变为100 + 1 = 101
update(num => num * 3)将 num 变为101 * 3 = 303

可见，最终的后果 303 与 同步的 React是统一的，只是须要 render 两次。

同步的 React render一次，后果为 303。

并发的 React render两次，后果别离为 300（中间状态），303（最终状态）。

从上例咱们发现，组件 render 的次数受 有多少更新被跳过 影响，理论可能不止 render 两次，而是屡次。

在老版 并发的 React中，示意 优先级 的是一个被称为 expirationTime 的工夫戳。比拟 更新是否应该被跳过 的算法如下：

// 更新优先级是否小于 render 的优先级
if (updateExpirationTime < renderExpirationTime) {// ... 被跳过} else {// ... 不跳过}

在这种逻辑下，只有优先级低，就会被跳过，就意味着多一次render。

在新版 并发的 React中，优先级 被保留在 31 位的二进制数 中。

举个例子：

const renderLanes = 0b0101;
u1.lane =           0b0001;
u2.lane =           0b0010;

其中 renderLanes 是本次更新指定的 优先级。

比拟 优先级 的函数为：

function isSubsetOfLanes(set, subset) {return (set & subset) === subset;
}

其中：

// true
isSubsetOfLanes(renderLanes, u1.lane)

// false
isSubsetOfLanes(renderLanes, u2.lane)

u1.lane蕴含于 renderLanes 中，代表这个更新领有足够优先级。

u2.lane不蕴含于 renderLanes 中，代表这个更新没有足够优先级，被跳过。

然而 被跳过的更新 （例子中的u2）的lane 会被重置为 0，即：

u2.lane = 0b0000;

显然任何 lanes 都是蕴含 0 的：

// true
isSubsetOfLanes(renderLanes, 0)

所以这个更新肯定会在下次解决。换言之，在新版 并发的 React中，因为 优先级起因被跳过 ，导致的 反复 render，最多只会有 2 次。

相比于老版 并发的 React，新版 并发的 React在 render 次数上会更有劣势。

反映到用户的感官上，用户会更少看到 未计算齐全的中间状态。

关于javascript:小推理React18比老版React更优秀的一个地方

状态从何而来

Concurrent 带来的变动

新旧 Concurrent 的区别

总结