常用的React生命周期“这是我参与8月更文挑战的第4天，活动详情查看： 8月更文挑战” https://juejin.

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战”

前言

“八月的色彩是用金子铸就的，明亮而珍贵；八月的色彩是用阳光酿造的，芬芳而灿烂。”

未来的日子，愿你把自己调至最佳状态，缓缓努力，慢慢变好 Y(^o^)Y

常用的生命周期函数

生命周期图解：

`constructor()`

在React组件挂载前会调用构造函数，如果是子组件的时候，为了避免this.props在构造函数中出现bug,一般会在最开始的调用super(props)。

一般有两种情况会使用到它：

通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例

✅正确的使用方式
constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

❌错误的使用方式
constructor(props) {
  super(props);
  // 不要这样做
  this.state = { color: props.color };
}

`render()`

render() 是一个纯函数。最终根据 state 和 props 渲染 dom 元素

注意：

在后续的更新阶段，如果 shouldComponentUpdate() 返回 false，则不会调用 render()

`componentDidMount()`

组件已经挂在完成，代表着组件的DOM已经挂载到页面的DOM树上，即使是获取数据后操作DOM也是安全的。

我们一般会在此生命周期中去进行网络请求，获取数据。也可以在此处添加订阅，如果添加了不要忘记在componentWillUnmount()中取消订阅

componentDidUpdate(prevProps, prevState, snapshot)

此方法会在更新后会被立即调用。首次渲染不会执行此方法

它有一个典型用法：
```
✅ 通过判断 props 属性的前后变化，去做一些请求动作
componentDidUpdate(prevProps) {
  // 不要忘记比较 props
  if (this.props.id !== prevProps.id) {
    this.fetchData(this.props.id);
  }
}
```
注意：
1. 如果组件实现了 getSnapshotBeforeUpdate() 生命周期（不常用），则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。
2. 如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()

`shouldComponentUpdate(nextProps, nextState)`

判断 React 组件的输出是否受当前 state 或 props 更改的影响。

返回Boolean值，默认会返回true，state 或者props 每次发生变化组件都会重新渲染。

该方法判断组件是否需要更新，通常是提升性能的重要方式。

我们可以将 this.props 与 nextProps 以及 this.state 与 nextState 进行比较，并返回 false来阻止组件的更新。但是要记住，返回 false 并不会阻止子组件在 state 更改时重新渲染。

`componentWillUnmount()`

它会在组件卸载及销毁之前直接调用。

在方法中执行必要的清理操作，例如，清除定时器任务（timer），取消网络请求或清除在 componentDidMount() 中创建的订阅等

react生命周期图解

【react生命周期】

结语

常用的生命周期就介绍到这里，如果这篇文章帮到了你，欢迎点赞👍和关注⭐️

文章如有错误之处，希望在评论区指正🙏🙏。