生命周期
01-react2026/11/14
生命周期概览
类组件生命周期三个阶段：
- 挂载阶段（Mounting）
- 更新阶段（Updating）
- 卸载阶段（Unmounting）
生命周期图示
挂载阶段：
constructor → getDerivedStateFromProps → render → componentDidMount
更新阶段：
getDerivedStateFromProps → shouldComponentUpdate → render →
getSnapshotBeforeUpdate → componentDidUpdate
卸载阶段：
componentWillUnmount
错误处理：
getDerivedStateFromError → componentDidCatch
挂载阶段（Mounting）
constructor()
组件实例化时调用，用于初始化 state 和绑定方法。
class MyComponent extends React.Component {
constructor(props) {
super(props); // 必须调用 super(props)
// 初始化 state
this.state = {
count: 0,
data: null,
};
// 绑定事件处理方法
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
console.log("constructor 被调用");
}
handleClick() {
// 处理点击
}
handleChange() {
// 处理变化
}
render() {
return <div>组件内容</div>;
}
}
static getDerivedStateFromProps()
在组件实例化或接收新 props 时调用，返回一个对象来更新 state，或返回 null 不更新。
class MyComponent extends React.Component {
state = {
derivedValue: "",
};
static getDerivedStateFromProps(nextProps, prevState) {
console.log("getDerivedStateFromProps 被调用");
console.log("新的 props:", nextProps);
console.log("当前的 state:", prevState);
// 根据 props 计算派生 state
if (nextProps.value !== prevState.lastValue) {
return {
derivedValue: nextProps.value.toUpperCase(),
lastValue: nextProps.value,
};
}
return null; // 不更新 state
}
render() {
return <div>派生值: {this.state.derivedValue}</div>;
}
}
render()
必须实现的方法，返回 JSX。
class MyComponent extends React.Component {
render() {
console.log("render 被调用");
// 不能在这里调用 setState()
// 应该是一个纯函数
return (
<div>
<h1>标题</h1>
<p>计数: {this.state.count}</p>
<button onClick={this.handleClick}>点击</button>
</div>
);
}
}
componentDidMount()
组件挂载到 DOM 后立即调用，适合执行副作用操作。
class MyComponent extends React.Component {
state = {
data: null,
loading: true,
error: null,
};
async componentDidMount() {
console.log("componentDidMount 被调用");
try {
// 1. 发起网络请求
const response = await fetch("https://api.example.com/data");
const data = await response.json();
this.setState({
data,
loading: false,
});
// 2. 设置定时器
this.timerId = setInterval(() => {
console.log("定时器执行");
}, 1000);
// 3. 添加事件监听器
window.addEventListener("resize", this.handleResize);
// 4. 操作 DOM
this.containerRef.current.focus();
// 5. 初始化第三方库
this.chart = new Chart(this.canvasRef.current, config);
} catch (error) {
this.setState({
error: error.message,
loading: false,
});
}
}
handleResize = () => {
console.log("窗口大小改变");
};
render() {
// render 方法
}
}