关于react.js:react组件的新旧生命周期

43次阅读

共计 1357 个字符,预计需要花费 4 分钟才能阅读完成。

1、生命周期(旧)

  1. constructor:结构器,能够用来初始化数据和接管参数props
  2. componentWillMount:组件将要挂载的钩子
  3. render:数据渲染,组件挂载在页面上的钩子
  4. 罕用 componentDidMount:组件挂载结束的钩子, ———-> 罕用
    ————–> 个别做初始化的事件,例如:开启定时器,发送网络申请,订阅音讯
  5. 罕用 componentWillUnmount:组件将要卸载的钩子, ———-> 罕用
    ————–> 个别做一些收尾的事件,敞开定时器,勾销订阅音讯
  6. shouldComponentUpdate:管制组件更新的阀门,必须 return true/false; 通过 setState 进行触发
  7. componentWillUpdate:组件将要更新的钩子,当 shouldComponentUpdate 返回 false 时,不触发,也能够通过 this.forceUpdate() 强行触发
  8. componentDidUpdate:组件更新结束的钩子
  9. componentWillReceiveProps:子组件接管父组件参数时调用(第一次除外)
总结归类
  • 初始化阶段: 由 ReactDOM.render()触发 — 首次渲染

    1.constructor()
    2.componentWillMount()
    3.render()
    4.componentDidMount()
  • 更新阶段: 由组件外部 this.setSate()或父组件从新 render 触发

        1.shouldComponentUpdate()
        2.componentWillUpdate()
        3.render()
        4.componentDidUpdate()
  • 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发

    1.componentWillUnmount()

2、生命周期(新)

总结归类
  • 初始化阶段: 由 ReactDOM.render()触发 — 首次渲染

    1.constructor()
    2.getDerivedStateFromProps 
    3.render()
    4.componentDidMount()
  • 更新阶段: 由组件外部 this.setSate()或父组件从新 render 触发

    1.getDerivedStateFromProps
    2.shouldComponentUpdate()
    3.render()
    4.getSnapshotBeforeUpdate// 在更新之前获取快照
    5.componentDidUpdate()
  • 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发

    1.componentWillUnmount()

3、重要的钩子

1.render:初始化渲染或更新渲染调用
2.componentDidMount:开启监听, 发送ajax 申请
3.componentWillUnmount:做一些收尾工作, 如: 清理定时器

4、行将废除的钩子

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate
// 当初应用会呈现正告,下一个大版本须要加上 UNSAFE_前缀能力应用,// 当前可能会被彻底废除,不倡议应用。

正文完
 0