react 生命周期最新试例讲解
时间: 2023-09-17 07:11:50 浏览: 47
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组件的生命周期方法。