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

2019年9月7日 83次阅读 来源: HughieSung

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

  • Initialization(初始化）
  • Mounting(挂载）
  • Updation(更新）
  • Unmounting(卸载）

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

父组件

  // 在组件即将被挂载到页面的时刻自动执行，挂载完毕不再执行
  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')
  }
    原文作者：HughieSung
    原文地址: https://segmentfault.com/a/1190000018164861
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞