大家好，我卡颂。

很多朋友知道React内部有个lane的概念，但不知道怎么用。

React中存在不同功能的lane，本文通过讲解其中最重要的一种lane来达到让你理解lane如何使用的目的。

lane的含义

想必你对如下代码再熟悉不过了：

// 对于ClassComponent
onClick() {
  this.setState({a: 100})
}
// 对于FunctionComponent
const [updateNum, num] = useState(0);
1.
2.
3.
4.
5.
6.

其中this.setState或updateNum的执行会触发更新。每个更新对应一个lane。

所以当我们这么写代码：

onClick() {
  this.setState({a: 100})
  this.setState({b: 'hello'})
  this.setState({c: true})
}
1.
2.
3.
4.
5.

就会触发很多更新(这些更新会被合并在一起处理，这里按下不表)。

除了「在一个组件的回调中同时触发多个更新」，我们也经常会「在不同组件的回调中触发更新」。

这两种情况都会产生一种结果：应用中同时存在一到多个lane。

这就是lane的意义：他与更新对应。

lane与lanes

lane与更新对应，更新与状态对应，状态与UI对应。

UI的变化通常是多个不同状态变化的结果，一路追溯回去，就与一到多个lane对应。

如何用一个变量表达「一到多个lane」呢?这就是lanes。

lane与lanes都是「31位二进制」，所以lanes可以很方便的表达「一到多个lane」，比如：

const laneA = 0b0001;
const laneB = 0b0010;
// lanes === 0b0011，lanes包含A和B
const lanes = laneA | laneB;
1.
2.
3.
4.

root.pendingLanes

lanes本身仅仅代表「lane的集合」，他的具体含义需要考虑「构成集合的lane的含义」。

本文讲解的lanes叫root.pendingLanes。

对于一个庞大的应用，在同一时间，可能有很多组件会触发更新，就对应很多lane。他们被统一保存在root.pendingLanes中。

可以认为，root.pendingLanes中记录了「应用中所有待执行的更新对应的lane」。

工作流程

当触发更新后，更新对应的lane会附加在root.pendingLanes中，代表「待执行的lane又增加一个」。

接下来React会从root.pendingLanes中选择一批lane组成lanes，作为本次render时需要考虑的lanes(这批lanes对于不同组件来说，对应不同更新，最终对应UI的变化)。

接下来开始每个组件的render。

我们知道，组件render时获取的状态就是组件当前状态，而状态的值最终与lane相关。所以，这一步是消费lane获取状态的过程。

最后，当页面完成渲染，root.pendingLanes中会移除「本次render时使用的lanes」(即上一步消费的lane)。

如此反复，直到root.pendingLanes为空。这就是root.pendingLanes的工作流程。

总结

root.pendingLanes只是众多lanes之一，但他关系到React整个更新流程。

其他lanes都是在这个流程中的某些部分发挥作用。