React 组件的生命周期是指组件从创建、渲染、更新到卸载的整个过程。在 React 16 及之前的版本中，生命周期方法被分为几个不同的阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）以及错误处理（Error Handling，React 16 引入）。但从 React 17 开始，一些生命周期方法被标记为不推荐使用（如 componentWillMount、componentWillReceiveProps、componentWillUpdate），并引入了新的钩子函数 getDerivedStateFromProps 和 componentDidMount（实际上 componentDidMount 在更早的版本就已存在，但这里强调其作为替代某些旧生命周期方法的作用）。在 React 18 中，又引入了新的并发特性，这可能会进一步影响生命周期的概念，但本文主要基于 React 16.x 和 17.x 进行讲解。
挂载（Mounting）
这是组件被插入到 DOM 中的过程。
constructor(props)
类组件的构造函数，初始化 state 或绑定事件处理函数时调用。
jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
}
static getDerivedStateFromProps(props, state)
当组件实例化后和接收新的 props 时将被调用。它应返回一个对象来更新 state，或者返回 null 来表明新的 props 不需要更新任何 state。
jsx
class MyComponent extends React.Component {
static getDerivedStateFromProps(props, state) {
if (props.count !== state.count) {
return { count: props.count };
}
return null;
}
}
render()
必须的方法，当组件需要更新时被调用，返回组件要渲染的内容。
jsx
class MyComponent extends React.Component {
render() {
return <div>{this.state.count}</div>;
}
}
componentDidMount()
组件挂载到 DOM 之后调用。此时可以进行 API 调用、订阅等操作。
jsx
class MyComponent extends React.Component {
componentDidMount() {
// 执行 API 调用等
}
}
更新（Updating）
组件的 props 或 state 发生变化时会进入更新过程。
static getDerivedStateFromProps(props, state)
组件更新时被调用，用于根据新的 props 来设置 state。
shouldComponentUpdate(nextProps, nextState)
决定组件是否应该更新。默认返回 true。返回 false 会阻止更新。
jsx
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.count === this.props.count) {
return false;
}
return true;
}
}
render()
更新后，重新渲染组件。
getSnapshotBeforeUpdate(prevProps, prevState)
真实的 DOM 更新前调用。返回的值作为 componentDidUpdate 的第三个参数。
jsx
class MyComponent extends React.Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
// 例如，记录滚动位置等
return null;
}
}
componentDidUpdate(prevProps, prevState, snapshot)
更新后立即调用。可以在这执行 DOM 操作或者执行更多的更新操作。
jsx
class MyComponent extends React.Component {
componentDidUpdate(prevProps, prevState, snapshot) {
// 例如，处理 DOM 更新后的逻辑
}
}
卸载（Unmounting）
componentWillUnmount()
组件卸载和销毁之前调用。用于执行必要的清理操作，如取消网络请求、移除订阅等。
jsx
class MyComponent extends React.Component {
componentWillUnmount() {
// 清理操作
}
}
错误处理（Error Handling）
React 16 引入了错误边界的概念，可用以下生命周期方法捕获子组件树的 JavaScript 错误。
static getDerivedStateFromError(error)
当子组件树中有组件抛出错误后，这个生命周期方法会被调用，返回值将作为 state。
componentDidCatch(error, info)
该生命周期方法会在后代组件抛出错误后被调用，可以用来记录错误信息。
错误边界组件示例：
jsx
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
// 可以将错误日志上报给你的服务器
console.log(error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
使用错误边界：
jsx
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
使用函数组件和 Hooks
在函数组件中，你可以使用 React Hooks 来模拟类组件中的生命周期方法。
useEffect 可以模拟 componentDidMount、componentDidUpdate 和 componentWillUnmount。
useState 和 useReducer 可以初始化 state，类似于 constructor。
useMemo 和 useCallback 可以优化性能，类似于 shouldComponentUpdate 的某些用例。
示例：
jsx
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
// 类似于 componentDidMount 和 componentDidUpdate
document.title = `You clicked ${count} times`;
// 类似于 componentWillUnmount
return () => {
// 清理操作
};
}, [count]); // 依赖项数组，类似于 shouldComponentUpdate
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
以上是 React 生命周期的详细解释以及各个阶段对应的代码示例。希望这能帮助你更好地理解 React 组件的生命周期。
