react 的state数据更新机制

最新推荐文章于 2025-06-06 09:12:32 发布

转载最新推荐文章于 2025-06-06 09:12:32 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/kaykie/blog/1529650

文章标签：

#javascript #ViewUI

本文深入探讨了React.js的工作原理，包括状态更新机制、虚拟DOM的生成过程以及diff算法的应用等关键技术点。通过实例讲解如何优化React应用，提高页面渲染效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

自己使用react时候的一些亲身感受,大神略过.

react的state数据更新机制,

调用setState方法后

更新底层数据,对比数据哪些不同,然后根据数据生在相对应的虚拟DOM,最后生成真实的DOM树.

这是我不看文档能理解的,看了网上专业的介绍后:

第一步：调用this.setState;

ReactClass.prototype.setState = function(newState) {
    //this._reactInternalInstance是ReactCompositeComponent的实例
    this._reactInternalInstance.receiveComponent(null, newState);
}

源码来自网络

第二步：调用内部receiveComponent方法

这里主要分三种情况，文本元素，基本元素，自定义元素。

我目前的项目这三种都有用到,算的上是全面吧.

在做数据对比的时候,还用了内部的一个算法:

react Diff算法

之后就是渲染到页面上了!

react的优点与总结

优点

虚拟节点。在UI方面，不需要立刻更新视图，而是生成虚拟DOM后统一渲染。
组件机制。各个组件独立管理,层层嵌套，互不影响，react内部实现的渲染功能。
差异算法。根据基本元素的key值，判断是否递归更新子节点，还是删除旧节点，添加新节点。

总结

想要更好的利用react的虚拟DOM，diff算法的优势，我们需要正确的优化、组织react页面。例如将一个页面render的ReactElement节点分解成多个组件。在需要优化的组件手动添加 shouldComponentUpdate 来避免不需要的 re-render。

转载于:https://my.oschina.net/kaykie/blog/1529650