简单说下Reactclass组件生命周期

在组件特定时期&＃xff0c;触发的条件&＃xff0c;统称为生命周期&＃xff1b;

• 组件生命周期分为三部分&＃xff1a;

  • 组件创建阶段&＃xff1a;组件创建阶段的生命周期函数&＃xff0c;有一个显著的特点&＃xff1a;创建阶段的生命周期函数&＃xff0c;组件一生只执行一次&＃xff1b;
    > componentWillMount&＃xff1a;组件将要被挂载&＃xff0c;此时还没有开始渲染虚拟dom
    > render&＃xff1a;第一次开始渲染真正的虚拟dom&＃xff0c;当render执行完&＃xff0c;内存中就有了完整额虚拟dom了
    > componentDidMount&＃xff1a;组件完成了挂载&＃xff0c;此时&＃xff0c;组件已经显示到了页面上&＃xff0c;当这个方法执行完后&＃xff0c;组件就进入了运行状态

  • 组件运行状态&＃xff1a;也有显著的特点&＃xff0c;根据组件的state和props的改变&＃xff0c;有选择性的执行0次或多次
    > componentWillReceiveProps&＃xff1a;组件将要接受新的属性&＃xff0c;此时&＃xff0c;只要这个方法被触发&＃xff0c;就证明父组件为当前子组件传递了新的参数
    > shouldComponentUpdate&＃xff1a;组件是否需要被更新&＃xff0c;此时&＃xff0c;组件尚未被更新&＃xff0c;但是&＃xff0c;state和props肯定是最新的
    > componentWillUpdate&＃xff1a;组件将要被更新&＃xff0c;此时&＃xff0c;尚未开始更新&＃xff0c;内存中的虚拟dom树还是旧的
    > render&＃xff1a;此时又要重新根据最新的state和props重新渲染一颗内存中的虚拟dom树&＃xff0c;当render调用完毕后&＃xff0c;内存中的旧DOM树替换了&＃xff01;此时页面还是旧的
    > ComponentDidUpdate&＃xff1a;此时&＃xff0c;页面又被重新渲染了&＃xff0c;state和虚拟DOM和页面数据已经完全保持同步

  • 组件销毁阶段&＃xff1a;一生只执行一次
    > componentWillUnmount&＃xff1a;组件将要被卸载&＃xff0c;此时组件还可以正常使用