专栏首页前端大白专栏react 的state数据更新机制

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

相关文章

  • 基于mpvue开发微信小程序(项目已开源)

    花了两周时间,我的微信小程序终于开发完了(平时上班,基本上都是业余时间开发的). 下面来介绍一下项目的功能以及结构. 用到的技术栈 vue2+weui+es6;...

    杭州前端工程师
  • 关于react-native的各种报错的最终解决方案

    杭州前端工程师
  • 基于mpvue开发微信小程序(项目已开源)

    杭州前端工程师
  • React组件总结——难道还没有你喜欢的组件吗?

    Javanx
  • 移动端项目快速升级 react 16 指南

    考虑到移动端性能,腾讯企鹅辅导移动端项目使用了更为轻量的 preact(7KB) 及其对应配套 preact-router 等, 考虑到 preact 对 re...

    IMWeb前端团队
  • 从项目中由浅入深的学习react (2)

    react + react-router-v4 + redux +ant-design-mobile+iconfont react-router-v4:路由4...

    火狼1
  • react基础(react设计模式与最佳实践读书笔记001)

    react如此强大的原因在于其声明式编程的使用。那么如何更加具体的阐释两者的区别呢?

    RobinsonZhang
  • 前端性能:股票交易APP频繁更新怎么破

    源码demo地址:https://github.com/JinJieTan/react-keepAlive-dynamic

    Peter谭金杰
  • react实战开发|react+web版聊天室

    基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe...

    andy2018
  • npx 是什么?

    这条命令会临时安装 create-react-app 包,命令完成后 create-react-app 会删掉,不会出现在 global 中。下次再执行,还是会...

    用户1065635

扫码关注云+社区

领取腾讯云代金券