React 生命周期函数

Posted 2021-03-07 alisalhx

挂载阶段的钩子函数

1. constructor(props,context)

初始化的动作，例如：初始化‘state‘,将事件处理函数绑定到类实例上

2.getDerivedStateFromProps(props,state)

在组件实例化后，和接受新的‘props‘后被调用
它必须返回一个对象来更新状态
或者返回null表示新的props 不需要任何state的更新
如果是由于父组件的‘props‘更改，所带来的重新渲染，也会触发此方法

3.render()

render()方法是必需的。当他被调用时，他将计算‘this.props‘和‘this.state‘,并返回以下一种类型：
　　1).React元素。通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。
　　2).字符串或数字。他们将会以文本节点形式渲染到dom中
　　3).null,什么也不渲染
　　4).布尔值。也是什么都不渲染

4.componentDidMount()

组件被装配后立即调用。初始化使得DOM节点应该进行到这里
通常在这里进行ajax请求
如果要初始化第三方的dom库，也在这里进行初始化。
只有到这里才能获取到真实的dom

卸载阶段的钩子函数

1.componentWillUnmount()

组件被卸载并销毁之前立即被调用
在此方法中执行任何必要的清理
例如使定时器无效
取消网络请求或清理在‘componentDidMount‘中创建的任何监听

更新阶段的钩子函数

1.static getDerivedStateFromProps(props,state)

2.shouldComponentUpdate(nextProps,nextState)

返回true 就会render
返回false 不会render
可以加条件减少不必要的渲染，增加性能

3.render()

4.getSnapshotBeforeUpdate(prevProps,prevState)
必须和componentDidUpdate一起用
必须返回一个值
不能和旧版的钩子函数一起使用
目的是为了返回数据更新前的dom状态

5.componentDidUpdate(prevProps,prevState,snapshot)

可以获得更新后的Dom,以及最新的state

 

上述若有错误的地方，请各位在评论区指出