深入理解 React 组件的生命周期：从创建到销毁的全过程

React 作为当今最流行的前端框架之一，其组件生命周期是每个 React 开发者必须掌握的核心概念。本文将全面剖析 React 组件的生命周期，包括类组件的各个生命周期方法和函数组件如何使用 Hooks 模拟生命周期行为，帮助开发者编写更高效、更健壮的 React 应用。

一、React 组件生命周期概述

React 组件的生命周期指的是一个组件从创建、更新到销毁的整个过程。在这个过程中，React 提供了许多"生命周期方法"，允许开发者在特定的阶段执行自定义代码。理解这些生命周期方法对于控制组件行为、优化性能以及管理副作用至关重要。

React 的生命周期可以分为三个主要阶段：

1. 挂载阶段（Mounting）：组件被创建并插入到 DOM 中

2. 更新阶段（Updating）：组件的 props 或 state 发生变化时的重新渲染过程

3. 卸载阶段（Unmounting）：组件从 DOM 中移除

此外，React 16 还引入了错误处理生命周期方法，用于捕获和处理组件树中的 JavaScript 错误。

二、类组件的生命周期详解

1. 挂载阶段（Mounting）

挂载阶段是组件第一次被创建并插入到 DOM 中的过程，包含以下生命周期方法：

constructor()

constructor(props) {super(props);this.state = { count: 0 };this.handleClick = this.handleClick.bind(this);
}

• 最先执行的生命周期方法

• 必须调用 super(props)，否则 this.props 将会是 undefined

• 唯一可以直接修改 this.state 的地方

• 用于初始化 state 和绑定事件处理方法

static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state) {if (props.value !== state.prevValue) {return {value: props.value,prevValue: props.value};}return null;
}

• 在 render 方法之前调用，无论是初始挂载还是后续更新

• 应返回一个对象来更新 state，或返回 null 不更新

• 用于 state 依赖于 props 变化的罕见情况

• 此方法无权访问组件实例（即不能使用 this）

render()

render() {return <div>{this.state.count}</div>;
}

• 类组件中唯一必须实现的方法

• 应该是一个纯函数，不修改组件状态，不与浏览器交互

• 返回以下类型之一：

  • React 元素（JSX）

  • 数组或 fragments

  • Portals

  • 字符串或数值（渲染为文本节点）

  • 布尔值或 null（不渲染任何内容）

componentDidMount()

componentDidMount() {// 典型用法：fetchData().then(data => this.setState({ data }));// 或this.subscription = dataSource.subscribe(this.handleDataChange);
}

• 组件挂载（插入 DOM 树）后立即调用

• 适合执行有副作用的操作：

  • 网络请求

  • 设置订阅

  • 手动操作 DOM

• 可以在此处直接调用 setState()，但会触发额外渲染

2. 更新阶段（Updating）

当组件的 props 或 state 发生变化时，会触发更新阶段的生命周期方法：

static getDerivedStateFromProps()

• 同挂载阶段，在每次渲染前调用

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState) {// 只有当count变化时才重新渲染return nextState.count !== this.state.count;
}

• 决定组件是否应该更新

• 返回 false 可以阻止组件重新渲染

• 主要用于性能优化

• 不建议深层比较或使用 JSON.stringify()，影响性能

• 考虑使用 PureComponent 替代手动实现

render()

• 同挂载阶段

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState) {if (prevProps.items.length < this.props.items.length) {const list = this.listRef.current;return list.scrollHeight - list.scrollTop;}return null;
}

• 在最近一次渲染输出（提交到 DOM 节点）之前调用

• 使得组件能在 DOM 变化前捕获一些信息（如滚动位置）

• 返回值将作为 componentDidUpdate() 的第三个参数

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot) {if (this.props.userID !== prevProps.userID) {this.fetchData(this.props.userID);}if (snapshot !== null) {const list = this.listRef.current;list.scrollTop = list.scrollHeight - snapshot;}
}

• 更新完成后调用（首次渲染不会执行）

• 适合执行有副作用的操作：

  • 网络请求（需比较 props）

  • DOM 操作

• 可以调用 setState()，但必须包裹在条件语句中，否则会导致无限循环

3. 卸载阶段（Unmounting）

componentWillUnmount()

componentWillUnmount() {clearInterval(this.timerID);this.subscription.unsubscribe();
}

• 组件卸载及销毁前调用

• 用于执行必要的清理操作：

  • 清除定时器

  • 取消网络请求

  • 清理订阅

• 不应调用 setState()，因为组件永远不会重新渲染

4. 错误处理

React 16 引入了错误边界的概念，用于捕获子组件树中的 JavaScript 错误。

static getDerivedStateFromError()

static getDerivedStateFromError(error) {return { hasError: true };
}

• 在后代组件抛出错误后被调用

• 接收错误作为参数

• 应返回一个状态对象以更新 state，用于渲染备用 UI

componentDidCatch()

componentDidCatch(error, info) {logErrorToService(error, info.componentStack);
}

• 在后代组件抛出错误后被调用

• 接收两个参数：

  • error - 抛出的错误

  • info - 包含 componentStack 键的对象

• 用于记录错误信息

三、函数组件的"生命周期"

随着 React Hooks 的引入，函数组件现在也能实现类组件的生命周期功能。以下是常用 Hooks 与生命周期方法的对应关系：

useState - 状态管理

const [count, setCount] = useState(0);

• 相当于类组件中的 this.state 和 this.setState

• 可以在函数组件中添加局部 state

useEffect - 副作用管理

useEffect(() => {// 相当于 componentDidMount 和 componentDidUpdatedocument.title = `You clicked ${count} times`;return () => {// 相当于 componentWillUnmount// 清理函数};
}, [count]); // 仅在 count 更改时更新

• 组合了 componentDidMount, componentDidUpdate 和 componentWillUnmount

• 第一个参数是 effect 函数，第二个参数是依赖数组

• 返回的函数是清理函数，在组件卸载时执行

useLayoutEffect

useLayoutEffect(() => {// 在 DOM 更新后同步执行const { width } = node.getBoundingClientRect();setWidth(width);
});

• 与 useEffect 签名相同，但调用时机不同

• 在 DOM 变更后同步触发

• 适用于需要读取 DOM 布局并同步重新渲染的情况

useMemo 和 useCallback - 性能优化

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

• 相当于 shouldComponentUpdate 的优化

• 用于避免不必要的计算和渲染

四、新旧生命周期对比与最佳实践

React 16.3 对生命周期方法进行了重大调整，废弃了一些不安全的生命周期方法：

废弃的方法：

• componentWillMount

• componentWillReceiveProps

• componentWillUpdate

这些方法被标记为不安全主要是因为：

1. 它们经常被误用和滥用

2. 在异步渲染中可能导致问题

3. 容易引入副作用和错误

最佳实践建议：

1. 将数据获取移到 componentDidMount 或 useEffect 中

2. 使用 getDerivedStateFromProps 替代 componentWillReceiveProps

3. 使用 getSnapshotBeforeUpdate 替代 componentWillUpdate

4. 考虑使用函数组件和 Hooks 替代类组件

5. 谨慎使用派生 state，多数情况下可以通过提升 state 或受控组件解决

五、实际应用场景示例

场景1：数据获取

class UserProfile extends React.Component {state = { user: null, loading: true };async componentDidMount() {const user = await fetchUser(this.props.userId);this.setState({ user, loading: false });}async componentDidUpdate(prevProps) {if (this.props.userId !== prevProps.userId) {this.setState({ loading: true });const user = await fetchUser(this.props.userId);this.setState({ user, loading: false });}}componentWillUnmount() {// 取消可能的未完成请求}render() {// 渲染用户信息}
}

场景2：滚动位置恢复

class ScrollList extends React.Component {getSnapshotBeforeUpdate(prevProps) {if (prevProps.items.length < this.props.items.length) {const list = this.listRef.current;return list.scrollHeight - list.scrollTop;}return null;}componentDidUpdate(prevProps, prevState, snapshot) {if (snapshot !== null) {const list = this.listRef.current;list.scrollTop = list.scrollHeight - snapshot;}}render() {return (<div ref={this.listRef}>{/* 列表内容 */}</div>);}
}

场景3：错误边界

class ErrorBoundary extends React.Component {state = { hasError: false };static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, info) {logErrorToService(error, info.componentStack);}render() {if (this.state.hasError) {return <h1>Something went wrong.</h1>;}return this.props.children; }
}

总结

React 组件的生命周期是 React 应用的核心机制，理解这些生命周期方法对于构建高效、可靠的 React 应用至关重要。随着 React 的发展，生命周期方法也在不断演进，从类组件的各种生命周期方法到函数组件的 Hooks，React 提供了更灵活、更简洁的方式来管理组件的生命周期。

对于新项目，建议优先考虑使用函数组件和 Hooks，它们提供了更简洁的代码组织和更强大的组合能力。对于现有项目，了解类组件的生命周期仍然很重要，特别是在维护老代码时。

记住，生命周期方法是你控制组件行为的工具，正确使用它们可以：

• 优化性能

• 管理副作用

• 处理错误

• 保持代码整洁和可维护

通过掌握 React 组件的生命周期，你将能够构建更强大、更可靠的 React 应用程序。