大家好，我卡颂。
很多朋友知道React内部有个lane的概念，但不知道怎么用。
React中存在不同功能的lane，本文通过讲解其中最重要的一种lane来达到让你理解lane如何使用的目的。
lane的含义
想必你对如下代码再熟悉不过了：
// 对于ClassComponent
onClick() {
this.setState({a: 100})
}
// 对于FunctionComponent
const [updateNum, num] = useState(0);
其中this.setState或updateNum的执行会触发更新。每个更新对应一个lane。
所以当我们这么写代码：
onClick() {
this.setState({a: 100})
this.setState({b: 'hello'})
this.setState({c: true})
}
就会触发很多更新(这些更新会被合并在一起处理，这里按下不表)。
除了「在一个组件的回调中同时触发多个更新」，我们也经常会「在不同组件的回调中触发更新」。
这两种情况都会产生一种结果：应用中同时存在一到多个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;
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都是在这个流程中的某些部分发挥作用。
