0
点赞
收藏
分享

微信扫一扫

React组件生命周期

booksmg2014 2022-03-30 阅读 191
reactjs

组件生命周期:

  • 组件从创建到消失,它会经历一些特定的阶段
  • React组件中包含一系列钩子函数(生命周期回调函数)
  • 在定义组件时,会在特定的生命周期回调函数中,做特定的工作

生命周期函数:(生命周期钩子)

挂载阶段(初始化):

constructor() 构造器函数执行

componentWillMount() 组件将要挂载,挂载前执行一次

render() 组件挂载(渲染到页面),render函数会执行1+n次,n为组件状态改变的次数

componentDidMount() 组件挂载完毕后立即执行,且只执行一次

更新阶段:(state变化)正常更新

shouldComponentUpdate() 不写默认返回true,允许更新状态(控制组件更新的阀门)

componentWillUpdate() 组件将要更新时执行(在页面重新渲染前执行一次)

render()  重新渲染

componentDidUpdate()  组件更新完成后执行

强制更新:(state不修改)不走阀门(this.forceUpdate())

componentWillUpdate() 组件将要更新时执行(在页面重新渲染前执行一次)

render()  重新渲染

componentDidUpdate()  组件更新完成后执行

父组件更新时

componentWillReceiveProps() 子组件将要接收新的props(第一次不算)

...

componentWillUnmount() 组件即将卸载前执行(ReactDom.unmountComponentAtNode())

react生命周期图(旧):

 react生命周期图:(新)

新-旧对比:

  • 新生命周期图中,废弃或即将废弃3个钩子函数(componentWillMount, componentWillReceiveProps, componentWillUpdate)
  • 新生命周期图中,又提出两个新函数(两个get...)

1. getDerivedStateFromProps() 若state的值在任何时候都取决于props,那么可以使用这个函数

2. getSnapshotBeforeUpdate() 在即将更新组件之前获取快照(返回需要的数据)

举报

相关推荐

0 条评论