react 的state数据更新机制

自己使用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏布尔

Ext的组件模型印象

组件模型在Ext1.x中已经引入了,但在框架中并没有得到全面的整合。2.0以后组件得到了很大的提高和改进,成为了框架的里最基础的一个类。组件对象模型为组件的创建...

18310
来自专栏我爱编程

Day22psutil&图形界面

psutil 用Python来编写脚本简化日常的运维工作是Python的一个重要用途。 在Python中获取系统信息的一个好办法是使用psutil这个第三方模...

2865
来自专栏JMCui

css重写checkbox样式

一、前言 默认的checkbox长这样: <p> <span><input type="checkbox" /></sp...

4115
来自专栏vue学习

24、商品列表页之数据渲染和传值

(1)data中定义一个list对象 (2)将res.data.goodslist赋值给list (3)我们将商品图片、文字描述、价格、折扣等等信息传给子组...

1541
来自专栏小詹同学

人脸检测(二 )——MFC实现

一、关于MFC 微软基础类库(英语:Microsoft Foundation Classes,简称MFC)是一个微软公司提供的类库(class...

5016
来自专栏逍遥剑客的游戏开发

Nebula3的渲染线程插件(Render Thread Plugin)

1504
来自专栏一“技”之长

OS X 开发:打开文件面板NSOpenPanel应用

      在Mac桌面软件开发中,如果涉及到对文件的操作,无论是新建文件还是选择或读取文件,都离不开文件路径的定位,NSOpenPanel类提供了简洁的文件选...

1253
来自专栏搞前端的李蚊子

ReactJs移动端兼容问题汇总

A:初步怀疑是css属性没有加前缀引发的兼容问题,但添加后发现也不行,通过webview调试后控制台输出Set is undefined,搜索后发现React依...

2515
来自专栏对角另一面

读Zepto源码之Gesture模块

Gesture 模块基于 IOS 上的 Gesture 事件的封装,利用 scale 属性,封装出 pinch 系列事件。 读 Zepto 源码系列文章已经放到...

2490
来自专栏圣杰的专栏

ABP入门系列(6)——定义导航菜单

完成了增删改查以及页面展示,这一节我们来为任务清单添加【导航菜单】。 在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这也是一种...

21910

扫码关注云+社区

领取腾讯云代金券