专栏首页编程从源码的角度再看 React JS 中的 setState

从源码的角度再看 React JS 中的 setState

在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 setState “诡异”表现的原因。

在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用。

源码的部分为了保证格式显示正常就截图了,查看源码点击对应的链接直接跳转至 GitHub 查看即可。

1. React 中的 setState 更新逻辑代码

在更新逻辑的部分,可以看到 React 会通过 判断当前的逻辑状态下是否需要进行批量更新。

如果不是,那么就直接进行页面的批量更新,将之前累积的所有状态一次更新到组件上。就是类似我们上一篇文章中举例的快递点一次将所有的快递寄出。

如果是,那么所有的组件状态不进行立即更新,而是将组件状态存放在一个叫的数组中去,等待下次更新时机的到来再进行更新。

源码地址:

https://github.com/facebook/react/blob/35962a00084382b49d1f9e3bd36612925f360e5b/src/renderers/shared/reconciler/ReactUpdates.js#L199

2. React 中的 Transaction 设计

为了实现上述的更新逻辑,React 设计了 Transaction 的逻辑,看起来也像是数据库中的事务。

源码中如图所示,给出了一幅图以及大段的解释。

React 将整个的函数执行过程包裹上了 Transaction,在函数执行前与执行后分别有 和 两个方法。

这样的话 React 就有时机在函数执行过程中,涉及到 setState 的执行,都将缓存下来,在 的时候进入到 React 的 state 更新逻辑进行更新判断操作,并最终更新到前台的 DOM 上。

源码地址:

https://github.com/facebook/react/blob/6d5fe44c8602f666a043a4117ccc3bdb29b86e78/src/shared/utils/Transaction.js#L28

其实 Virtual DOM 的框架都会有这样的设计逻辑,理解了这样的底层设计才能很好地理解一些方法在前台的表现行为。

Vue.js 中也有类似的设计逻辑,后续如果有时间我们将继续进行相关讨论。

下一篇文章,我们继续来看 React 底层是如何进行 的设计以及更新状态的转换的。

加入 DevOpenClub Pro 知识星球

DevOpen.Club Pro 原创视频社区小程序

本文来自企鹅号 - DevOpen媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 重新带你了解React.js

    走进 前端学习 React.js,你了解吗? 在进入react.js的讲解之前吗,我们现在了解下2018年react.js的发展趋势吧。 React Nativ...

    企鹅号小编
  • 2017年JS 框架回顾:React 生态系统

    英文:Laurie Voss 译文:葡萄城控件 www.cnblogs.com/powertoolsteam/p/state-of-javascript-fr...

    企鹅号小编
  • 2017JavaScript框架战报-React分战场

    【IT168 资讯】我们来看看与React有关的软件包的生态系统。当Facebook构建React时,就有许多来自开源社区的第三方软件包。为提供完整的应用程序体...

    企鹅号小编
  • 21个React开发神器

    有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer可以帮助咱们分析。

    Fundebug
  • 2017年JS 框架回顾:React 生态系统

    英文:Laurie Voss 译文:葡萄城控件 www.cnblogs.com/powertoolsteam/p/state-of-javascript-fr...

    企鹅号小编
  • 2017年 JavaScript 框架回顾 -- React生态系统

    前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就...

    葡萄城控件
  • React生态系统

    IT故事会
  • React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)

    本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

    前端人人
  • 高质量前端资源 ( 一 )

    日常喜欢浏览各种技术网站包 hashnode ,stepoint, medium , hacknews , stackoverflow , github ,国内...

    陈远峰
  • Python3 字典 items() 方

    Python 字典 items() 方法以列表返回可遍历的(键, 值) 元组数组。

    py3study

扫码关注云+社区

领取腾讯云代金券