目录

 各个阶段生命周期函数

constructor()

static getDerivedStateFromProps(nextProps, state)

render()

componentDidMount()

shouldComponentUpdate(nextProps, nextState)

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate(prevProps, prevState, snapshot)

componentWillUnmount()

挂载

• constructor
• static getDerivedStateFromProps（纯函数，静态方法）
• render
• componentDidMount

更新

• static getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

卸载

• componentWillUnmount

React从v16.3开始弃componentWillMount、componentWillReceiveProps 、componentWillUpdate 三个钩子函数

 各个阶段生命周期函数

constructor()

constructor()在React组件挂载之前被调用，在为React.Component子类实现构造函数时，应在其他语句之前调用super()

super的作用：将父类的this对象继承给子类

通常，构造函数仅用于以下两种情况：

• 来初始化函数内部 state
• 为事件处理函数绑定实例

如果不初始化state 或不进行方法绑定，则不需要写 constructor(), 只需要设置this.state 即可

static getDerivedStateFromProps(nextProps, state)

getDerivedStateFromProps()  在调用render方法之前调用，在初始化和后续更新都会被调用

参数： 第一个参数为即将更新的props, 第二个参数为上一个状态的 state, 可以比较props 和 state来加一些限制条件，防止无用的state更新

返回值：返回一个对象来更新 state, 如果返回null则不更新任何内容

注意：getDerivedStateFromProps是一个静态函数，不能使用this, 也就是只能作一些无副作用的操作

render()

render() 方法是class组件中唯一必须实现的方法，用于渲染dom， render()方法必须返回reactDOM

注意： 不要在 render里面setState, 否则会触发死循环导致内存崩溃

componentDidMount()

componentDidMount() 在组件挂载后 (插入DOM树后) 立即调用，componentDidMount()是发送网络请求、启用事件监听方法的好时机，并且可以在 此钩子函数里直接调用setState()

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate() 在组件更新之前调用，可以控制组件是否进行更新， 返回true时组件更新， 返回false则不更新

包含两个参数，第一个是即将更新的 props值，第二个是即将跟新后的 state值，可以根据更新前后的 props 或 state 来比较加一些限制条件，决定是否更新，进行性能优化

可以使用内置PureCompontent组件替代

不要 shouldComponentUpdate中调用 setState()，否则会导致无限循环调用更新、渲染，直至浏览器内存崩溃

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate()在最近一次的渲染输出被提交之前调用。也就是说，在 render 之后，即将对组件进行挂载时调用。

它可以使组件在 DOM 真正更新之前捕获一些信息（例如滚动位置），此生命周期返回的任何值都会作为参数传递给 componentDidUpdate()。

需要注意的几点：

• getSnapshotBeforeUpdate函数需要和 componentDidUpdate一起使用，否则会报 warning
• getSnapshotBeforeUpdate在生命周期中为什么要在 render 函数之后而不是之前调用，主要还是因为 React 想保证 render 阶段的无副作用。

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行

包含三个参数，第一个是上一次props值。 第二个是上一次state值。如果组件实现了getSnapshotBeforeUpdate()生命周期（不常用），第三个是“snapshot” 参数传递

可以进行前后props的比较进行条件语句的限制，来进行 setState() , 否则会导致死循环

componentWillUnmount()

componentWillUnmount()在组件即将被卸载或销毁时进行调用。

此生命周期是取消网络请求、移除监听事件、清理 DOM 元素、清理定时器等操作的好时机