React是一款流行的JavaScript库，它提供了一种基于组件的方式来构建UI界面。React中的组件有生命周期，这些生命周期函数分为三个阶段：初始化、更新和卸载。本文将对React中常用的生命周期函数进行详解，包括操作的时机和使用场景。
初始化阶段
在组件初始化的阶段，React会调用以下生命周期函数，按照执行顺序列出如下：
constructor()
constructor是React组件中的构造函数，它在组件被创建时被调用。它主要的作用是初始化组件的状态和绑定事件。在这个函数中，可以使用this.state属性来初始化组件的状态。
示例代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-------- -
-- ---
-
-static getDerivedStateFromProps(props, state)
getDerivedStateFromProps是一个静态方法，用于在props传递给组件之前更新组件的状态。它是一个很少使用的函数，因为它不能访问组件的实例属性。它返回一个对象，用于更新组件的状态。如果不需要更新状态，则返回null。
示例代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------ ------------------------------- ------ -
-- ------------ --- ------------ -
------ - ------ ----------- --
-
------ -----
-
-------- -
-- ---
-
-render()
render方法是React组件中最重要的函数之一，它用于根据组件的状态和属性来生成UI界面。render方法必须返回一个React元素（或null），否则会抛出异常。在render方法中，可以使用this.props和this.state来访问组件的属性和状态。
示例代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-------- -
------ -
-----
---------------------------
------ ------- --- ------ ------------------ ---------
------- ----------- -- --------------- ------ ---------------- - - ----
----- --
---------
------
--
-
-componentDidMount()
componentDidMount方法在组件被渲染后调用，主要用于初始化一些需要DOM元素的操作，如定时器、网络请求等。该函数被调用时，可以保证DOM元素已经被渲染，可以直接操作DOM。
示例代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------- -
-- ------
------------
-- -----
------------ - -------------- -- -
--------------------- -- -- ------ ----------- - - ----
-- ------
-
---------------------- -
----------------------------
-
-------- -
-- ---
-
-更新阶段
当组件的状态或属性发生变化时，React会重新渲染组件，调用以下生命周期函数，按照执行顺序列出如下：
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps在组件更新之前调用，它的作用和初始化阶段相同。
shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate方法返回一个布尔值，用于控制组件是否需要更新。如果返回false，则组件不会重新渲染。这个函数的默认实现是始终返回true。这个函数的主要作用是优化React的性能，避免不必要的渲染。
示例代码：
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return this.props.value !== nextProps.value;
}
render() {
// ...
}
}render()
render方法在更新阶段和初始化阶段是一样的。
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate方法在组件更新之后调用，它可以在DOM更新后进行一些操作，如发送网络请求等。
该函数接收三个参数：
- prevProps：更新前的属性值
- prevState：更新前的状态值
- snapshot：getSnapshotBeforeUpdate返回的值
示例代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----------------------------- ---------- -
-- ------------------ --- ----------------- -
--------------- -------------- ------- ------- ---- ------------------- -- --------------------- ---
-
-
-------- -
-- ---
-
-卸载阶段
当组件从页面上卸载时，React会调用以下生命周期函数，按照执行顺序列出如下：
componentWillUnmount()
componentWillUnmount方法在组件被卸载前调用，它用于清理组件的一些操作，如清除定时器等。该函数和componentDidMount是成对出现的，它们用于管理组件的生命周期。
示例代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------- -
------------ - -------------- -- -
-- ---
-- ------
-
---------------------- -
----------------------------
-
-------- -
-- ---
-
-总结
React的生命周期函数分为三个阶段：初始化、更新和卸载。在不同的阶段，React会调用不同的函数，用于管理组件的生命周期。熟练掌握这些函数对于开发高质量的React应用非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b8f8495b1f8cacd3352a5