React 是一种用于构建用户界面的 JavaScript 库，该库具有响应式和高效的特性。而 React 生命周期是 React 在组件渲染过程中自动调用的一组方法。
生命周期的分类
React 生命周期可以分为三类：挂载、更新和卸载。下面我们分别介绍一下：
挂载
constructor()：构造函数，在组件被创建时调用。componentWillMount()：组件将要被挂载时调用。render()：组件渲染时调用。componentDidMount()：组件被挂载时调用。
更新
componentWillReceiveProps()：组件将要接收新的 props 时调用。shouldComponentUpdate()：组件是否需要更新时调用，返回 true 时组件更新，返回 false 时不更新。componentWillUpdate()：组件将要更新时调用。render()：组件重新渲染时调用。componentDidUpdate()：组件更新完毕时调用。
卸载
componentWillUnmount()：组件将要被卸载时调用。
生命周期的应用
React 生命周期可以用来处理组件的各种生命周期，如组件渲染前的数据初始化、组件更新时的数据同步、组件卸载时的清理工作等。
下面我们通过一个实际的示例来理解 React 生命周期的应用：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ --
--
-
-------------------- -
---------------------- ---- --------
-
------------------- -
---------------------- --- --------
-
------------------------------------ -
---------------------- ---- ------- ------- -----------
-
-------------------------------- ---------- -
------------------- --------- ---------
------ -----
-
--------------------- -
---------------------- ---- ---------
-
-------------------- -
---------------------- --- ---------
-
---------------------- -
---------------------- ---- ----------
-
----------- - -- -- -
---------------
------ ---------------- - --
---
--
-------- -
----------------------
------ -
-----
---------------------------
--------- ----------------------
------- -------------------------------- -----------
------
--
-
-
------ ------- --------在上面的代码中，我们定义了一个 Example 组件，该组件每当按钮被点击时，组件状态 count 的值会加 1。
在组件挂载阶段，会先调用 componentWillMount() 方法，随后调用 render() 方法对组件进行渲染，最后调用 componentDidMount() 方法。
在组件更新阶段，当父组件传递新的 props 时，会依次调用 componentWillReceiveProps()、shouldComponentUpdate()、componentWillUpdate()、render()、componentDidUpdate() 方法。
在组件卸载时，会调用 componentWillUnmount() 方法。
生命周期使用技巧
在使用 React 生命周期时，需要注意以下几点：
- 尽量避免在
render()方法中直接操作 DOM，这样会影响 React 的性能。 - 在
componentDidMount()方法中可以执行异步操作，如获取 Ajax 数据等。 - 在
shouldComponentUpdate()方法中可以实现性能优化，控制组件是否重新渲染。 - 在
componentWillReceiveProps()方法中可以根据新的 props 状态来更新组件状态。 - 在
componentWillUnmount()方法中需要清理定时器、解除绑定事件等。
总结
React 生命周期是 React 组件在渲染过程中自动调用的一组方法，分为挂载、更新和卸载三个阶段。生命周期的应用可以处理组件的各种生命周期，如组件渲染前的数据初始化、组件更新时的数据同步、组件卸载时的清理工作等。在使用 React 生命周期时需要注意避免操作 DOM、实现性能优化、根据新的 props 状态更新组件状态、清理定时器、解除绑定事件等。
希望本文能够对大家了解和掌握 React 生命周期有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64757f95968c7c53b028aebd