你知不知道React lanes到底咋用啊？

大家好，知不知道咋用我卡颂。到底

很多朋友知道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都是在这个流程中的某些部分发挥作用。