在React中，类式组件的生命周期可以分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。
新的生命周期（推荐使用）:
挂载阶段:
- static getDerivedStateFromProps
- render
- componentDidMount
更新阶段:
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
卸载阶段:
- componentWillUnmount
旧的生命周期（已废弃）:
挂载阶段:
- constructor
- componentWillMount (注意，在16.3之后不再推荐使用)
- render
- componentDidMount
更新阶段:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate (注意，在16.3之后不再推荐使用)
- render
- componentDidUpdate
卸载阶段:
- componentWillUnmount
示例代码：
class MyComponent extends React.Component {
// 构造函数
constructor(props) {
super(props);
// 初始化状态
this.state = { counter: 0 };
// 绑定方法
this.incrementCounter = this.incrementCounter.bind(this);
}
// 在组件挂载后立即调用
componentDidMount() {
console.log('组件已挂载');
}
// 在组件即将卸载时调用
componentWillUnmount() {
console.log('组件即将卸载');
}
// 处理增加计数器的逻辑
incrementCounter() {
this.setState(prevState => ({ counter: prevState.counter + 1 }));
}
// 渲染组件
render() {
return (
<div>
<p>Counter: {this.state.counter}</p>
<button onClick={this.incrementCounter}>Increment</button>
</div>
);
}
}请注意，在新的React生命周期中，已经移除了几个过时的生命周期方法，如componentWillMount、componentWillUpdate和componentWillReceiveProps，以优化错误处理和性能。推荐使用新的生命周期方法。