文档章节

react 的state数据更新机制

前端大白
 前端大白
发布于 2017/09/05 22:40
字数 400
阅读 277
收藏 0

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

 

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
前端大白
粉丝 10
博文 85
码字总数 38501
作品 0
杭州
程序员
mobx——rudex的简单替代品

mobx 能干什么 使用 react 写小型应用,数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段,引入任何状态管理库,都算是奢侈的。但是随着页面逻辑的复杂度提升,在中大型应用...

穿越过来的键盘手
07/10
0
0
深入理解 React JS 中的 setState

此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用。 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 setState 的表现好像有点怪异,和理...

达摩院法师
01/05
0
0
谈谈新的 React 新的生命周期钩子

在 React 16.3 中,Facebook 的工程师们给 React 带来一系列的新的特性,如 suspense 和 time slicing 等,这些都为 React 接下来即将到来的异步渲染机制做准备,有兴趣的可以看 Sophie Alp...

六面体混凝土移动师
08/15
0
0
JavaScript 状态管理框架--Mobx

介绍 MobX是一个经久考验的库,使得状态管理简单而且透明、可伸缩的应用功能反应性编程(TFRP)。MobX背后的哲学很简单: 任何可以由应用程序状态,应该是自动派生的。 包括用户界面、数据序列化、...

匿名
2016/06/14
3.5K
0
如何存储 React 组件的数据

主要讲解这几个部分:state、store、static、this、module-global data 前言 随着 React 和 Redux 的到来,一个共同的问题被问到: 我应该将数据保存在 Redux Store 中呢?还是应该保存成本地...

卢林
2016/10/16
87
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

文件的压缩与解压(linux)

Linux下*.tar.gz文件解压缩命令 1.压缩命令:   命令格式:tar -zcvf 压缩后文件名.tar.gz 被压缩文件名 可先切换到当前目录下。压缩文件名和被压缩文件名都可加入路径。 2.解压缩命令: ...

qimh
23分钟前
1
0
invalid character found in the request target 异常

这个异常时因为Tomcat 9不支持请求格式出现“{”等非法字符的问题 因为tomcat版本问题遇到的坑,记录一下。 问题 今天由于要测试一下订单详情页的异步查询,在本地起了一个服务,发送的请求是...

edwardGe
28分钟前
1
0
发现抓包软件fiddler的bug

1个请求他跳转之后,直接400,被拦在了Apache,使用fiddler 的,replay requests 是同样的结果,但是replay composer确是正常的。 也就是说这replay requests 是发原来的包,replay composer...

NLGBZJ
38分钟前
1
0
linux screen 命令详解

shell关闭后, 主机仍然运行 screen命令 启动jenkins以后, screen, 然后按ctrl+a 再按d 这样暂停了子界面, 这时候回到了父界面 用screen –ls查看目前子界面的状态 [root@free /]# screen -l...

SuShine
38分钟前
1
0
mac机器切换无线网络导致网页不能打开的问题

问题: 公司和家里使用不同的WI-FI,每次从家到公司时自动切换网络后,公司的许多地址不能访问, ping域名是可以ping同的,但是网页却打不开... 问题分析: 初步猜想是DNS缓存的问题? 对于MAC系统没...

Lennie002
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部