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 条评论
登录 后参与评论

相关文章

来自专栏Ryan Miao

eclipse中断点调试debug

几乎没有用过debug模式,每次想要知道结果都是sysou一下。记得曾经问乱码问题,jfinal说打断点调试看在哪里出错。简单记下普通调试。 1.在需要查看的地...

3338
来自专栏圣杰的专栏

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

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

20610
来自专栏Golang语言社区

golang文件传输服务

本篇介绍一个完整的golang文件传输服务器。 完整的代码可以看服务器,客户端 网络使用的框架如上篇介绍,这里就不再复述. 首先定义3个命令码: const (...

3095
来自专栏BestSDK

Android Studio 开发必备的17个快捷键,效率提高一倍!

1. 书签(Bookmarks) 描述:这是一个很有用的功能,让你可以在某处做个标记(书签),方便后面再跳转到此处。 调用:Menu → Navigate → ...

39612
来自专栏章鱼的慢慢技术路

Go语言实践_实现一(服务器端)对多(客户端)在线聊天室

运用Go语言中的goroutine和通道实现一个简单的一个服务器端对多个客户端的在线聊天

1353
来自专栏布尔

Ext的组件模型印象

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

17610
来自专栏我爱编程

Day22psutil&图形界面

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

2765
来自专栏技术博文

ueditor富文本编辑器 修改框宽度和高度的方法

在使用ueditor的时候,用的textarea <textarea name="content" id="myEditor">这里写这条规则的回复内容</te...

3417
来自专栏对角另一面

读Zepto源码之Gesture模块

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

2310
来自专栏小詹同学

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

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

4566

扫码关注云+社区