文档章节

react 的state数据更新机制

前端大白
 前端大白
发布于 2017/09/05 22:40
字数 400
阅读 379
收藏 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

 

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
前端大白
粉丝 12
博文 78
码字总数 34497
作品 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
JavaScript 状态管理框架--Mobx

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

匿名
2016/06/14
3.5K
0
谈谈新的 React 新的生命周期钩子

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

六面体混凝土移动师
08/15
0
0
如何存储 React 组件的数据

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

卢林
2016/10/16
87
0

没有更多内容

加载失败,请刷新页面

加载更多

selenium 结合 docker 构建分布式测试环境

随着自动化测试越学越深,深深觉得有太多的东西需要总结。 1.记录下学习中遇到的坑,当做学习笔记。 2.有前人路过看到文章中比较落后的做法,请务必一定要指教。(因为是初学者视角,很多东西...

呐呐丶嘿
11分钟前
1
0
PostgreSQL 安装启动使用一条龙教程——Ubuntu 16.04

今天想尝试下 PostgreSQL,分享一下在 Ubuntu 16.04 下安装启动使用 PostgreSQL 一条龙方法。 添加第三方 apt 仓库: sudo add-apt-repository "deb http://apt.postgresql.org/pub/repos/a...

宇润
13分钟前
2
0
对于json文件的读写操作

对json文件的读操作 返回的一个列表,里面是多个字典 def read_json(self,jsonname): with open(r"./{}.json".format(jsonname),"r") as json_f: text_list = json......

鹏灬
15分钟前
2
0
Date-Time API简介

  Date-Time API简介      在Java8之前的版本中,我们处理时间类型常常使用的是java.util包下的Date类。但使用Date类却有诸多的弊端,如: java.util.Date 是非线程安全的,所有的日期...

SEOwhywhy
16分钟前
2
0
实体类生成对应的建表语句

通过实体类生成对应的建表语句 用java代码根据实体类自动生成对应的建表语句或生成某个包下的所有类的建表语句 根据实体类反射生成SQL java 根据实体对象生成 增删改的SQL语句 ModelToSQL...

miaojiangmin
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部