你知不知道Reactlanes到底咋用啊？

大家好，我卡颂。

创新互联公司是一家集网站建设,高县企业网站建设,高县品牌网站建设,网站定制,高县网站建设报价,网络营销,网络优化,高县网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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

新闻标题：你知不知道Reactlanes到底咋用啊？
标题链接：http://www.shufengxianlan.com/qtweb/news32/261382.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联