React学习笔记2---生命周期

发布时间:2019-06-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React学习笔记2---生命周期脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

生命周期函数指在某一个时刻组件会自动调用执行的函数,React的生命周期函数主要有

  • InITialization(初始化)
  • mounting(挂载)
  • Updation(更新)
  • Unmounting(卸载)

clipboard.png

父组件

  // 在组件即将被挂载到页面的时刻自动执行,挂载完毕不再执行
  componentWillMount() {
    console.LOG('componentWillMount')
  }
   render() {
    console.log('parent render');
    return //JSX
  }
// 组件被挂载到页面之后,自动被执行,挂载完毕不再执行
  componentDidMount() {
    console.log('componentDidMount')
  }

  // 组件被更新之前,自动被执行
  shouldComponentUpdate() {
    console.log('shouldComponentUpdate')
    return true;
  }

  // 组件被更新之前,它会自动执行,但是它在shouldComponentUpdate之后执行
  // 如果shouldComponentUpdate返回true它才执行
  // 返回false,这个函数就不会被执行了
  componentWillUpdate() {
    console.log('componentWillUpdate')
  }

  // 组件更新完成之后自动被执行
  componentDidUpdate() {
    console.log('componentDidUpdate')
  }

子组件

  // 一个组件从父组件接收了参数
  // 如果这个组件第一次存在于父组件中,不会执行
  // 如果这个组件之前已经存在于父组件中,才会执行
  componentWillReceivePRops() {
    console.log('child componentWillReceiveProps')
  }

  // 当这个组件即将被从页面中剔除的时候,会被执行
  componentWillUnmount() {
    console.log('child componentWillUnmount')
  }

脚本宝典总结

以上是脚本宝典为你收集整理的React学习笔记2---生命周期全部内容,希望文章能够帮你解决React学习笔记2---生命周期所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。