React.js 小书 Lesson20 - 更新阶段的组件生命周期

---

React.js 小书 Lesson20 - 更新阶段的组件生命周期

本文做者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson20

转载请注明出处，保留原文连接以及做者信息

在线阅读：http://huziketang.com/books/react

---

从以前的章节咱们了解到，组件的挂载指的是将组件渲染而且构造 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 小书 Lesson21 - ref 和 React.js 中的 DOM 操做》。