React生命周期

生命周期

React的生命周期有哪些

React生命周期分为三个阶段：

• 装载阶段：组件第一次在页面渲染
• 更新阶段：组件状态发生变化引起页面重新渲染
• 卸载阶段：组件从DOM树中被移除的阶段

react生命周期(旧)

react生命周期(新)

组件挂载阶段

组件被创建就在挂载阶段，组件被创建后组件实例被插入到DOM中，完成组件的第一次渲染。在该阶段会一次调用如下方法：

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

(1) constructor()
组件中的构造器，若显式定义了constructor，必须执行super(props)，否咋无法在构造函数中拿到this。

构造器中通常做两件事：定义state和给事件绑定this。

constructor(props){
  super(props)
  this.state={
    count: 0,
    name: "lsw"
  },
  this.handleClick = this.handleClick.bind(this)
}

(2) getDrivedStateFromProps()：将传入的props映射到state上面

static getDrivedStateFromProps(props, state)

getDrivedStateFromProps()方法是一个静态方法，不可以在该函数内部使用this。getDrivedStateFromProps()接受两个参数，props代表接收到的新的参数，state代表当前组件的state对象，会返回一个对象用来更新当前的state对象，如果不更新会返回null。

该方法会在组件装载、接受到新的props、setState和forceUpdate时被调用。

(3) render
render()是React最核心的方法，它只做一件事，就是根据state和props渲染新的页面。

(4) componentDidMount()
componentDidMount()会在组件挂载后立即调用用，主要做以下几件事情：

• 执行依赖于DOM的操作
• 发送网络请求
• 添加订阅消息（会在componentWillUnmount取消订阅）

组件更新阶段

当组件的state、props改变了，或调用了forceUpdate，会触发组件的更新，这个过程可能会发生多次。这个阶段会依次调用如下方法：

• getDrivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

(1) shouldComponentUpdate(nextProps, nextState)
在讲这个生命周期函数之前，先要了解下面两个问题：

1. setState()在任何情况下都会导致组件重新渲染吗？
2. 如果没有调用setState、props的值也没有变化，组件就不会重新渲染吗？
   第一个问题是会，第二个问题是如果父组件重新渲染时，不管子组件的props有没有发生变化，都会引起子组件的重新渲染，这样会导致性能下降，这时就要用到shouldComponentUpdate()。

shouldComponentUpdate()是在组件重新渲染开始之前触发的，返回值为一个布尔值，默认返回true，通过比较this.state和nextState、this/props和nextProps的值是否变化，来返回true或false。当返回false时，组件的更新过程停止，后续的render()和componentDidUpdate()也不会被调用。不要使用深比较进行检查。

(2) getSnapshotBeforeUpdate(prevProps, prevState)
prevProps, prevState表示更新之前的props和state，这个函数必须要和componentDidUpdate()一起使用，并且要有一个返回值，默认返回null，这个返回值作为参数传给componentDidUpdate()。

适用场景：更新时需要用到更新之前的state和props的情况，例如在带有滚动条的信息栏插入一条信息。

(3) componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate()会在更新后被立即调用，首次渲染不会执行此方法，该阶段通常进行如下操作：

• 对DOM进行操作
• 进行网络请求

组件卸载阶段

该阶段只有一个生命周期函数：componentWillUnmount()，会在组件卸载及销毁之前调用，在此方法中必须要执行的操作是：

• 清除网络请求
• 取消在componentDidMount()中发布的消息订阅

React废弃了三个生命周期函数是为什么？

被废弃的三个函数分别是：componentWillMount()、componentWillUpdate()、componentWillReceiveProps()。

componentWillMount()的功能完全可以被constructor()和componentDidMount()代替，比如异步请求、消息订阅的操作。

componentWillReceiveProps()中主要做的事是比较更新前后的两个props是否一致，如果不一致，再将props更新到state。这么做有两个问题：

1. 破坏了state单一数据源，导致组件的状态变得不可预测
2. 会增加重绘的次数

componentWillUpdate()不管更没更新，都会执行回调函数，而我们有时只想在更新成功后执行回调函数，这可以将componentWillUpdate()的回调迁移到componentDidUpdate()中进行。

props改变后会在哪个生命周期函数中处理

在getDrivedStateFromProps()函数中进行处理的。getDrivedStateFromProps()是一个静态函数，不能通过this访问class的属性，而是通过参数提供的nextProps和prevProps进行比较，根据新传入的props来映射state。

React性能优化在哪个生命周期函数

shouldComponentUpdate()。如果父组件重新渲染，子组件会跟着重新渲染，大多数情况下，子组件的这种重新渲染是没有必要的，所以可以在shouldComponentUpdate()方法中取消子组件的更新，提升性能。

网络请求在哪个生命周期函数中处理

componentDidMount()。在该生命周期函数中组件已被完全挂载到网页上了，可以保证数据的加载。