2021-03-29

新的生命周期
Mounting（加载阶段：涉及4个钩子函数）
constructor()

加载的时候调用一次，可以初始化state

static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

componentDidMount()

组件渲染之后调用，只调用一次

Updating（更新阶段：涉及5个钩子函数)
static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

shouldComponentUpdate(nextProps, nextState)

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
getSnapshotBeforeUpdate(prevProps, prevState)

触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

componentDidUpdate()

组件加载时不调用，组件更新完成后调用
Unmounting（卸载阶段：涉及1个钩子函数）

组件渲染之后调用，只调用一次
Error Handling(错误处理)
componentDidCatch(error，info)

任何一处的javascript报错会触发
组件的基本写法
import React, { Component } from ‘react’

export default class NewReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps：接收初始props
// getInitialState：初始化state
}
state = {

}
static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
    return state
}
componentDidCatch(error, info) { // 获取到javascript错误

}
render() {
    return (
        <h2>New React.Component</h2>
    )
}
componentDidMount() { // 挂载后

}   
shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
    return true
}
getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发

}
componentDidUpdate() { // 组件更新后触发

}
componentWillUnmount() { // 组件卸载时触发

}

}
总结
新版本 1990031847-5f815c34a3b51.png 老版本 u=96739499,776354039&fm=26&gp=0.jpg

React16新的生命周期弃用了componentWillMount、componentWillReceiveProps，componentWillUpdate
新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceiveProps，componentWillUpdate）
React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17将会删除componentWillMount、componentWillReceiveProps，componentWillUpdate
新增了对错误的处理（componentDidCatch）