文档章节

react 的state数据更新机制

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

 

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
前端大白
粉丝 9
博文 77
码字总数 33880
作品 0
杭州
程序员
JavaScript 状态管理框架--Mobx

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

匿名 ⋅ 2016/06/14 ⋅ 0

如何存储 React 组件的数据

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

卢林 ⋅ 2016/10/16 ⋅ 0

React学习开发经验总结分享

Immutability Helper 这是react官方文档推荐的方法(源代码很少) 一般的state,例如层级比较浅的,可以直接用或者(扩展语法来解构),但是在层级比较深,或者操作数组的情况下reducer写起来就要...

liangpure ⋅ 2017/11/10 ⋅ 0

React.js 组件的 props vs state

看到一篇无比蛋疼的文章:https://www.oschina.net/translate/exploring-reacts-state-propagation。我不针对翻译,只是针对这篇文章想提出的概念,说了跟没说一样,傻傻的。 要搞清楚React...

曾建凯 ⋅ 2016/12/05 ⋅ 0

ReactJS开发入门

ReactJS的确是一个伟大的东西,就其核心而言,就是一个可以和html混合编写的jsx格式,以及一个良好有序(加载时和更新时)、并和html渲染实时捆绑的状态机制。学习和使用ReactJS,你并不需要...

曾建凯 ⋅ 2016/03/05 ⋅ 28

浅谈React 16中的Fiber机制

浅谈React 16中的Fiber机制 有赞技术团队2017-11-142 阅读 React前端 九月份关于 React 开源协议的话题在社区闹得沸沸扬扬,所幸最后以 Facebook 宣布遵循 MIT 进行开源告终,但由此也足以看...

有赞技术团队 ⋅ 2017/11/14 ⋅ 0

通往全栈工程师的捷径 —— React

首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的是房价,很明显,人类对 React 的关注程度已经远...

我家有宝 ⋅ 2016/01/14 ⋅ 0

深入理解React(二) —— 数据流和事件原理

版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qcloud.com/community 这个,叫做竹笕,是中日传统...

偶素浅小浅 ⋅ 2016/11/08 ⋅ 0

react深入研究

深入react react是一门很火的技术,虽然我用过它,但是并没有真正非常深入进去,所以还是要重新审视一番才行 Autobinding: 在 JavaScript 里创建回调的时候,为了保证 this 的正确性,一般都...

sunshinewyf ⋅ 2016/09/25 ⋅ 0

React从零开始(3)——生命周期的详细阐述

中文文档 首先要推荐一下React中文文档,无意中在github上发现的,对英语不是很好的学习者来说,无疑是最大的福音,感叹开源的强大之余,更要感谢那些参与翻译的贡献者! 概述 了解React组件...

心扬 ⋅ 2017/11/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部