React 组件生命周期是指组件从被创建到被销毁的整个过程，其中包含了多个阶段，每个阶段会触发一系列的生命周期函数。理解 React 组件生命周期有助于我们深入理解组件的内部机制，优化组件的性能，以及维护组件的状态。
React 组件生命周期可以分为三个主要阶段：组件创建阶段、组件更新阶段和组件销毁阶段。
组件创建阶段
在组件创建阶段，React 会依次执行以下生命周期函数：
constructor(props)
这个函数会在组件被实例化时调用，用于初始化组件的状态和绑定事件处理函数。
-- -------------------- ---- ------- ----- ------- ------- --------------- - ------------------ - ------------- ---------- - - ------ - -- ---------------- - ---------------------------- - ------------- - --------------- ------ ---------------- - - --- - -------- - ------ ------- ------------------------------------------------------- - -展开代码
static getDerivedStateFromProps(props, state)
这个函数会在组件实例化时和每次更新前都会被调用，用于根据 props 计算出新的 state。该函数必须返回一个新的 state，并且不能有副作用。
-- -------------------- ---- ------- ----- ------- ------- --------------- - ------ ------------------------------- ------ - -- ------------ -- -- - ------ - ------ - -- - ---- - ------ - ------ ----------- -- - - -------- - ------ ------------------------------ - -展开代码
render()
这个函数会在组件实例化时和每次更新时被调用，用于渲染组件的内容。该函数必须返回一个 React 元素或者 null。
class Example extends React.Component { render() { return <div>Hello, {this.props.name}!</div>; } }
componentDidMount()
这个函数会在组件渲染完成后被调用，用于初始化组件的数据和绑定 DOM 事件。该函数不能修改组件的 state。
-- -------------------- ---- ------- ----- ------- ------- --------------- - ------------------- - ---------- - -------------- -- - --------------- ------ ---------------- - - --- -- ------ - ---------------------- - -------------------------- - -------- - ------ ------------------------------ - -展开代码
组件更新阶段
在组件更新阶段，React 会依次执行以下生命周期函数：
static getDerivedStateFromProps(props, state)
同组件创建阶段。
shouldComponentUpdate(nextProps, nextState)
这个函数会在组件更新前被调用，用于判断组件是否需要更新。如果返回 false，则不会触发该组件的更新。该函数可以用于优化组件的性能。
class Example extends React.Component { shouldComponentUpdate(nextProps, nextState) { return nextProps.value !== this.props.value; } render() { return <div>{this.props.value}</div>; } }
render()
同组件创建阶段。
componentDidUpdate(prevProps, prevState)
这个函数会在组件更新后被调用，用于更新组件的数据和重新绑定 DOM 事件。该函数不能修改组件的 state。
-- -------------------- ---- ------- ----- ------- ------- --------------- - ----------------------------- ---------- - -- ----------------- --- ---------------- - --------------- ------ ---------------- --- - - -------- - ------ ------------------------------ - -展开代码
组件销毁阶段
在组件销毁阶段，React 会触发以下生命周期函数：
componentWillUnmount()
这个函数会在组件被删除前触发，用于清理组件的数据和解除绑定的 DOM 事件。
-- -------------------- ---- ------- ----- ------- ------- --------------- - ------------------- - --------------------------------- --------------------- - ---------------------- - ------------------------------------ --------------------- - -------- - ------ ----------- ------------- - -展开代码
上面就是 React 组件生命周期的完整流程和生命周期函数的使用方法。通过深入理解 React 组件的生命周期，我们可以更好地优化组件的性能，保持组件的状态和数据，提升我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6906b306f20b3a6298d79
