React的
生命周期方法在最
新版本（
React 16.3及以上）中有所改变。下面是
React生命周期的最
新示例：
1. constructor：组件实例化时调用，用于初始化state和绑定事件处理程序。
```
jsx
class MyComponent extends
React.Component {
constructor(props) {
super(props);
this.state = {
name: 'John'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// 处理点击事件
}
render() {
return (
<div>
<h1>Hello, {this.state.name}</h1>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
```
2. static getDerivedStateFromProps：在props更改时调用，用于根据
新的props更
新state（不常用）。
```
jsx
class MyComponent extends
React.Component {
constructor(props) {
super(props);
this.state = {
name: props.name
};
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.name !== prevState.name) {
return {
name: nextProps.name
};
}
return null;
}
render() {
return <h1>Hello, {this.state.name}</h1>;
}
}
```
3. componentDidMount：组件渲染完成后调用，可以进行异步操作和DOM操作。
```
jsx
class MyComponent extends
React.Component {
componentDidMount() {
// 发起异步请求或其他副作用操作
}
render() {
return <h1>Hello, world!</h1>;
}
}
```
4. shouldComponentUpdate：接收
新的props或state时调用，返回一个布尔值，决定是否触发组件更
新（优化性能时常用）。
```
jsx
class MyComponent extends
React.Component {
shouldComponentUpdate(nextProps, nextState) {
// 根据
新的props或state决定是否更
新组件
if (nextProps.someProp !== this.props.someProp) {
return true;
}
return false;
}
render() {
// 组件渲染逻辑
}
}
```
5. componentDidUpdate：组件更
新后调用，可以进行DOM操作或发起异步请求（需要谨慎使用，避免导致无限循环）。
```
jsx
class MyComponent extends
React.Component {
componentDidUpdate(prevProps, prevState) {
// 根据prevProps和prevState进行一些操作
}
render() {
// 组件渲染逻辑
}
}
```
6. componentWillUnmount：组件卸载前调用，用于清理定时器、取消订阅等操作。
```
jsx
class MyComponent extends
React.Component {
componentWillUnmount() {
// 清理操作
}
render() {
// 组件渲染逻辑
}
}
```
这些是
React生命周期的最
新示例，它们可以帮助你更好地理解和使用
React组件的
生命周期方法。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
323
