小推理：React18 比老版 React 更优秀的一个地方

业界 作者：SegmentFault 2022-03-18 16:03:54 阅读：1048

大家好，我卡颂。

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：

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

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

Concurrent带来的变化

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

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

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

2. update(num => num * 3)将num变为101 * 3 = 303

新旧Concurrent的区别

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

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

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

// true
isSubsetOfLanes(renderLanes, u1.lane)

// false
isSubsetOfLanes(renderLanes, u2.lane)

u2.lane = 0b0000;

// true
isSubsetOfLanes(renderLanes, 0)

最后