🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭React🍭
💨💨💨

什么是生命周期？

1. 组件从创建到死亡它会经历一些特定的阶段。
2. React 组件中包含了一系列钩子函数（生命周期回调函数），会在特定的时候调用。
3. 我们在定义组件时，会在特定的生命周期回调函数中做特定的工作。

旧生命周期流程图

新生命周期流程图

生命周期的三个阶段

1.初始化阶段

由ReactDOM.render()触发—初次渲染

• componentWillMount （已弃用）

  组件将要挂载到DOM节点时触发。

  作用： 初始化数据。

• getDerivedStateFromProps(nextProps,nextState) (新增)

  第一次的初始化组件以及后续的更新过程中触发（包括自身状态更新以及父传子），返回一个对象与this.state合并作为新的state，返回null则说明不需要在这里更新state。

  使用场景： 此方法适用于罕见的用例，当state的值在任何时候都取决于props时使用。

  此方法无权访问组件实例，可以靠参数获得组件的属性和状体。

• render

  初始化渲染或状态更新之后触发。只能访问this.props和this.state，不允许修改状态和DOM输出。

• componentDidMount

  成功render并渲染完成真实DOM之后触发，可以修改DOM。

  使用场景： 一般做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息等。

componentWillMount和componentDidMount都只会执行一次。

2.更新阶段

由组件内部this.setState()或父组件render触发

• componentWillReceiveProps(nextProps)（已弃用）

  组件将要接收新的props时触发，第一次接收props不触发。

  参数：nextProps组件接收到的新的props。

• shouldComponentUpdate(nextProps,nextState)

  控制组件是否更新的阀门，必须有返回值，返回值为布尔类型。不写这个函数默认返回值为true。

  参数：

  • nextProps组件将要更新为的属性对象。
  • nextState组件将要更新为的状态对象。

• componentWillUpdate （已弃用）

  组件将要更新时触发。不能修改属性和状态

• render

  只能访问this.props和this.state，不允许修改状态和DOM输出。

• getSnapshotBeforeUpdate()（新增）

  在最近一次渲染输出（提交到DOM节点）之前调用。

  作用： 使组件能在发生更改之前从DOM中捕获一些信息。

  返回值： 此生命周期的返回值将作为 componentDidUpdate()的第三个参数。

• componentDidUpdate(prevProps,prevState，value)

  组件更新完毕时触发。

  参数：

  • prevProps组件更新前的属性对象。
  • prevState组件更新前的状态对象。

3.销毁阶段

由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount

组件将要卸载时调用。

在删除组件之前进行清理操作，例如：关闭定时器、取消订阅消息、事件监听器等。

老生命周期的问题

（1）componentWillMount在ssr（服务端渲染）中 这个方法将会多次调用，所以会重复触发多次，同时在这里如果绑定事件将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃。

（2）componentWillReceiveProps 外部组件多次频繁更新传入多次不同的props，会导致不必要的异步请求

（3）componentWillUpdate更新前记录DOM状态，可能会做一些处理，与componentDidUpdate相隔时间如果过长，会导致状态不可信。

react中性能优化的方案

1.shouldComponentUpdate

控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下，需要进行优化。

例如：判断更新之前的属性和状态与将要更新的属性和状态时候一致。

2.PureComponent

PureComponent会帮你比较新props 跟 旧的props，新的state和老的state（值相等，或者对象含有相同的属性且属性值相等），来帮助你确定shouldcomponentUpdate 返回true 或者false,从而决定要不要呼叫 render function.

import React, { PureComponent } from 'react'
...
export default class App extends PureComponent {
...
}
...

注意：

如果你的state 或 props 【永远不会变】，那pureComponent 并不会比较快，因为shallowEqual 也需要花时间。