React的生命周期

React的生命周期函数

生命周期函数是什么

概念：组件从创建、到运行、再到销毁，这期间总是伴随着各种各样的事件，那么，这些事件统称为组件的生命周期函数。
组件生命周期分为三部分：
- 组件创建阶段：组件在创建时执行一次。
- 组件运行阶段：组件根据属性props和状态state的改变，有选择性的触发0次或多次。
- 组件销毁阶段：组件在销毁时时执行一次。
  React生命周期的回调函数执行顺序

组件创建阶段的生命周期函数

componentWillMount(){}
   - 组件将要挂载的时候执行的函数，组件尚未挂载到页面中。
   - 虚拟DOM也没有开始创建。
   - 这个生命周期函数相当于 vue 中的 created(){}


render(){}
   - 在 return 之前，虚拟DOM还没有开始创建，页面上也是空的，此时无法拿到页面中的元素。
   - 不要在 render 中使用 this.setState,这样做会导致会死循环。 
   - 当 return 执行完毕后， 虚拟DOM创建好了，但是，还没有挂载到真正的页面中


componentDidMount(){}
   - 当组件挂载到页面上之后，会执行此生命周期函数。
   - 此时，我们可以操作页面中的DOM元素了，这是我们可以最早操作DOM元素的生命周期函数。
   - 当组件执行完 componentDidMount 函数后，就进入到了 运行中的状态，所以，componentDidMount 是创建阶段的最后一个函数
   - 此函数 相当于 Vue 中的 mounted 函数

组件运行阶段的生命周期函数

componentWillReceiveProps(nextProps, nextState){}
   - 在次函数中必须返回一个布尔值，如果返回的值是 false，则不会继续执行后续的生命周期函数，
       组件直接退回到了运行中 的状态，后续的 render 函数并没有被调用，因此，
       页面不会被更新，但是,组件的state状态或者 props却被修改了；
   - 此时操作 state 或者 props中的属性，需要使用nextProps和 nextState，因为this.state和this.props存储的还是未更新的属性


shouldComponentUpdate(nextProps, nextState){}
   - 组件将要更新，但是此时尚未更新，在进入这个生命周期函数的时候，内存中的虚拟DOM是旧的，页面上的 DOM 元素 也是旧的 


componentWillUpdate(nextProps, nextState){}
   - 此时页面上的 DOM 节点，都是旧的，我们要应该慎重操作，因为此时操作的是旧DOM


render(){}


componentDidUpdate(prevProps, prevState){}
   - 组件已经完成更新，state 中的数据、虚拟DOM、页面上的DOM，都是最新的。

组件销毁阶段的生命周期函数

- compoentWillUnmount(){}
    - 组建将要被卸载。此时，组建还是可用状态。

React的生命周期

React的生命周期函数

生命周期函数是什么

React生命周期的回调函数执行顺序

Tags

FRIENDS