React的生命周期函数

什么是生命周期函数：生命周期函数是指在某一个时刻组件会自动调用执行的函数

  • Initialization：初始化
    • 执行Constructor，初始state和props
  • Mounting
    • componentWillMount( ) : 在组件即将被挂载到页面的时刻自动执行，在render( )函数执行之前执行
    • render( ): 渲染组件
    • componentDidMount( ): 组件被挂载到页面之后，自动被执行

初始加载页面时：

  • Updation
    • componentWillReceiveProps( ) : 一个组件要从父组件接受参数，只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行（ props数据变更时独有的生命周期 ）
      • 如果子组件第一次存在于父组件中，不会被执行
      • 如果这个子组件之前已经存在于父组件中，当父组件render函数被重新执行时，才会被执行
    • shouldComponentUpdate( ) :组件被更新之前，他会自动被执行，要求返回一个Boolean值 （可以理解为：你的组件需要被更新吗）
    • componentWillUpdate( ) : 组件被更新之前，他会自动执行，但是他在shouldComponentUpdate( )之后才执行
      • 如果shouldComponentUpdate( ) 返回true他才执行
      • 如果返回false，这个函数就不会被执行了
    • render( ) :页面知道数据props或者states发生了变化，render函数重新渲染虚拟DOM，渲染真实的DOM
    • componentDidUpdate( ): 组件更新完成之后，他会被自动执行

在input框输入时：

提交后更新时：

  • Unmounting
    • componentWillUnmount( ): 当这个组件即将被从页面中剔除时，会被执行

删除增加的列表时：

版权声明：本文为nayek原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/nayek/p/12363683.html