React 作为当今最流行的前端框架之一，其组件生命周期是每个 React 开发者必须掌握的核心概念。本文将全面剖析 React 组件的生命周期，包括类组件的各个生命周期方法和函数组件如何使用 Hooks 模拟生命周期行为，帮助开发者编写更高效、更健壮的 React 应用。
一、React 组件生命周期概述
React 组件的生命周期指的是一个组件从创建、更新到销毁的整个过程。在这个过程中，React 提供了许多"生命周期方法"，允许开发者在特定的阶段执行自定义代码。理解这些生命周期方法对于控制组件行为、优化性能以及管理副作用至关重要。
React 的生命周期可以分为三个主要阶段：
挂载阶段（Mounting）：组件被创建并插入到 DOM 中
更新阶段（Updating）：组件的 props 或 state 发生变化时的重新渲染过程
卸载阶段（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 和 componentDidUpdate
document.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
这些方法被标记为不安全主要是因为：
它们经常被误用和滥用
在异步渲染中可能导致问题
容易引入副作用和错误
最佳实践建议：
将数据获取移到 componentDidMount 或 useEffect 中
使用 getDerivedStateFromProps 替代 componentWillReceiveProps
使用 getSnapshotBeforeUpdate 替代 componentWillUpdate
考虑使用函数组件和 Hooks 替代类组件
谨慎使用派生 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 应用程序。