美文网首页
【React】—setState机制

【React】—setState机制

作者: 南慕瑶 | 来源:发表于2017-12-19 17:30 被阅读0次

概述:

setState通过一个队列机制实现state更新。

当执行setState时,会将需要更新的state 合并后 放入状态队列,而不会立刻更新this.state。

队列机制可以高效地批量更新state。

setState调用栈:

1.setState源码概况:

setState -> 

enqueueSetState(进行状态队列_pendingStateQueue合并操作。每一个component都有一个自己的_pendingStateQueue) -> 

enqueueUpdate(接收一个参数,当前component) -> 

处于批量更新模式:dirtyComponents.push(component)   或

不处于批量更新模式:batchedUpdates(enqueueUpdate,component)->

 batchedUpdates调用transaction.perform(参数:enqueueUpdate,component)执行队列更新函数

事务的作用:将需要执行的方法用wrapper封装起来,再用事务的perform方法执行。即:此处执行完所有wrapper中的initialize方法后,执行enqueueUpdate,再执行wrapper中所有close方法。

2.setState调用栈图示

setState简化调用栈

关于事务,注意:

整个将React组件渲染到DOM中的过程就处于一个大的事务中。此时,batchedUpdates被调用,batchingStrategy.isBatchingUpdates == true,所以在componentDidMount中调用setState,不会立即生效。

相关文章

  • react之setState运行机制

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

  • 【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 JS 中的 setState

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

  • 深入理解 React JS 中的 setState

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

  • react setState执行机制

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

  • 学习总结

    React 原理 react做了什么?1Virtual Dom模型 2生命周期管理 3setState机制 4di...

  • 2018-11-20 React setState同步更新

    react的setState特点: react中的setState特点: 1. 异步操作函数; ...

网友评论

      本文标题:【React】—setState机制

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