从之前的章节我们了解到,组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。这是一个从无到有的过程,React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作。

除了挂载阶段,还有一种“更新阶段”。说白了就是 setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程,这是一个组件的变化过程。而 React.js 也提供了一系列的生命周期函数可以让我们在这个组件更新的过程执行一些操作。

这些生命周期在深入项目开发阶段是非常重要的。而要完全理解更新阶段的组件生命周期是一个需要经验和知识积累的过程,你需要对 Virtual-DOM 策略有比较深入理解才能完全掌握,但这超出了本书的目的。本书的目的是为了让大家快速掌握 React.js 核心的概念,快速上手项目进行实战。所以对于组件更新阶段的组件生命周期,我们简单提及并且提供一些资料给大家。

这里为了知识的完整,补充关于更新阶段的组件生命周期:

  1. shouldComponentUpdate(nextProps, nextState):你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。
  2. componentWillReceiveProps(nextProps):组件从父组件接收到新的 props 之前调用。
  3. componentWillUpdate():组件开始重新渲染之前调用。
  4. componentDidUpdate():组件重新渲染并且把更改变更到真实的 DOM 以后调用。

大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档

但这里建议大家可以先简单了解 React.js 组件是有更新阶段的,并且有这么几个更新阶段的生命周期即可。然后在深入项目实战的时候逐渐地掌握理解他们,现在并不需要对他们放过多的精力。

有朋友对 Virtual-DOM 策略比较感兴趣的话,可以参考这篇博客:深度剖析:如何实现一个 Virtual DOM 算法。对深入理解 React.js 核心算法有一定帮助。


因为第三方评论工具有问题,对本章节有任何疑问的朋友可以移步到 React.js 小书的论坛 发帖,我会回答大家的疑问。

React.js 小书 Lesson20 - 更新阶段的组件生命周期的更多相关文章

  1. React.js 小书 Lesson19 - 挂载阶段的组件生命周期(二)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...

  2. React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...

  3. 【React.js小书】动手实现 React-redux(五):Provider - 方志

    我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151 ...

  4. React.js 小书介绍

    React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...

  5. React.js 小书 Lesson16 - 实战分析:评论功能(三)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson16 转载请注明出处,保留原文链接和作者信息. 接下来的代码比较顺理成章了.修改 Commen ...

  6. React.js小书总结

    (迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...

  7. React.js 小书 Lesson25 - 实战分析:评论功能(四)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

  8. React.js 小书 Lesson26 - 实战分析:评论功能(五)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson26 转载请注明出处,保留原文链接和作者信息. (本文未审核) 持久化评论 同样地,可以通过类 ...

  9. React.js 小书 Lesson24 - PropTypes 和组件参数验证

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...

随机推荐

  1. Android-显示意图和隐式意图

    显示意图,一般情况下是用于,APP应用自身:组件(Activity,Service,...) 与 组件(Activity,Service,...) 的激活调用: 显示意图,是可以看得到,明确激活哪一个 ...

  2. 使用Amazon Simple Queue Service(SQS) 实现简单的消息服务

    一  引言 亚马逊Amazon作为云计算的领跑者推出了很多云服务,最近因为项目的原因,需要用到SQS服务,因此简要地写下这篇随笔,一来方便以后查阅,二来方便共享一些简单的操作. SQS即可以理解为一个 ...

  3. 微软2014实习生招聘笔试第2题 the k-th string

    Time Limit: 10000msCase Time Limit: 1000msMemory Limit: 256MB Description Consider a string set that ...

  4. Arduino I2C + 温湿度传感器Si7021

      Si7021是Silicon Labs生产的温湿度传感器芯片.其主要特性: 湿度精度:误差典型值+/-2%RH,最大值+/-3%RH(0~80%RH),出厂已校正 温度精度:误差典型值+/-0.3 ...

  5. Mathcad操作tips:2D绘图

    1. 直接输入算式进行绘图(QuickPlot) 2. 先定义函数,再利用函数绘制多个曲线.一张图最多支持16条曲线.留意“,”的用法. 3. 利用空格键和","在现有绘图上增加新 ...

  6. 【转】C#中使用aria2c进行下载并显示进度条

    [转自] C#中使用aria2c进行下载并显示进度条 - 云平台知识库 - 博客园https://www.cnblogs.com/littlehb/p/5782714.html 正则表达式的生成网站: ...

  7. DEV 之 有些控件不允许拖动。

    DEV 之 有些控件不允许拖动.  设置一个参数即可解决问题

  8. Linux使用私钥公钥(Public key)登录 - 免密码登录

    为了更安全.方便的登录Linux服务器,可以取消密码登录,使用私钥公钥的方式来登录,更方便也更安全. 生成密钥 借助Xshell可以很方便的生成和管理私钥,点击工具菜单,选择新建用户密钥生成向导: 直 ...

  9. ML.NET Cookbook --- 1.如何从文本文件中加载数据?

    使用ML.NET中的TextLoader扩展方法从文本文件中加载数据.你需要知道在文本文件中数据列在那里,它们的类型是什么,在文本文件中什么位置可以找到它们. 请注意:对于ML.NET只读取文件的某些 ...

  10. 为啥我的Andrid百度SDK不能正常运行?

    首先,百度SDK运行时候需要加载API Key,这个API Key是通过百度账号在百度里面申请到的,但是很可能大家没有注意到百度这个API Key申请的过程,其中很重要的一个步骤没有做好,而导致不能正 ...