美文网首页
react setState执行机制

react setState执行机制

作者: skoll | 来源:发表于2020-06-08 17:12 被阅读0次

setState是异步的

1 .调用setState是不会立即更新的
2 .所有组件使用的是同一套更新机制,当所有组件didmount之后,父组件didmount,然后统一执行更新
3 .更新时会把每个组件的更新合并,每个组件只会触发一次更新后的生命周期

异步函数和原生事件中的setState

1 .用setTimeout模拟异步和回调接口执行情况
2 .在这种情况下,setState会同步更新的

setState更新机制

this.setState({ index: this.state.index + 1 }, () => {
            console.log(this.state.index);
          })
        this.setState({ index: this.state.index + 2 }, () => {
            console.log(this.state.index);
        })
        // 使用对象合并的setState操作,如果是同一个值的话,会合并成一条执行,其实这里只是执行了第二条,但是第一条里面的打印日志也会显示为2


        this.setState((preState) => ({ index: preState.index + 1 }), () => {
            console.log(this.state.index);
          })
        this.setState(preState => ({ index: preState.index + 2 }), () => {
            console.log(this.state.index);
        })
        // 使用函数方式进行更新,是不会被合并的,就算是更新同一个值,同理,第一个也会打印出3

执行state流程

1 .将setState传入的partialState参数存储在当前组件实例的state暂存队列中
2 .判断当前React是否处于批量更新状态,如果是,将当前组件加入待更新的组件队列中去
3 .如果未处于批量更新状态,将批量更新状态标识未true,用事务再次调用前一步的方法,保证当前组件加入了待更新的组件队列中去
4 .调用事务的waper方法,遍历待更新组件队列依次执行更新
5 .执行生命周期componentWillReceiveProps
6 .将组件的state和暂存队列中的state进行合并,得到最新的state对象,并将队列置为空
7 .执行生命周期componentShouldUpdate,根据返回值判断是否要更新。那这里不更新的时候,值还会倒退回去吗?
8 .执行生命周期componentWillUpdate
9 .执行真正的更新 render
10 .执行生命周期comonentDidUpdate
11 .当上一次更新机制执行完毕,以生命周期为例,所有组件,最顶层组件的didmount之后将isBranchUpdate设置为false,执行之前累积的setState
12 .

componentDidMount 调用setState

1 .component中可以使用setState,这将会导致额外触发一次渲染,虽然他将在浏览器刷屏幕前发生。容易导致性能问题
2 .但是有一些情况是不可避免地,比如某些状态必须依赖dom地属性
3 .可以在componentDidMount中调用接口,回调中去进行setState操作
4 .componentWillUpdate,componentDidUpdate中是不能调用setState,会导致死循环的。

相关文章

  • react setState执行机制

    setState是异步的 1 .调用setState是不会立即更新的2 .所有组件使用的是同一套更新机制,当所有组...

  • react之setState运行机制

    React setState 运行机制 setState是同步操作,采用批处理机制react采用了事务transa...

  • 关于setState()数据更新

    执行setState()之后干了什么? setState()方法通过一个队列机制实现state更新,当执行setS...

  • setState 小结

    调用 setState 的时候,发生了什么? 在执行setState的时候,React Component将new...

  • 【React】—setState机制

    概述: setState通过一个队列机制实现state更新。 当执行setState时,会将需要更新的state合...

  • React setState机制

    转自:https://blog.csdn.net/lunahaijiao/article/details/8699...

  • react事务

    react事务机制,混合setState 1.react的事务,几乎贯穿了react所有提供调用的方法。生命周期,...

  • React常见问题集

    setState什么时候异步什么时候同步? 在React内部机制能检测到的地方, setState就是异步的,比如...

  • react 的一些点滴

    React中的setState执行机制是什么呢? 类组件和函数式组件有何不同? 1、函数组件只是返回一个DOM 结...

  • 深入理解 React JS 中的 setState

    此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用。 在课程 ...

网友评论

      本文标题:react setState执行机制

      本文链接:https://www.haomeiwen.com/subject/gkcnzhtx.html