面试总结——react生命周期

react生命周期总结

生命周期主要分为以下几个阶段：

• Mounting:创建虚拟DOM，渲染UI(初始化)
• Updating：更新虚拟DOM，重新渲染UI；(更新)
• UnMounting：删除虚拟DOM，移除UI；(销毁)

1. 生命周期第一阶段:初始化
   这个阶段主要包含两个函数，一个是构造函数constructor，用来初始化state，另一个函数就是componentDidMount，这个函数一般是在组件创建好DOM元素之后，挂载进页面的时候调用；
2. 生命周期的第二个阶段就是更新：
   这个阶段由需要注意四个函数：
   • componentWillReceiveProps，这个函数已经被废弃了，但是我们还是要了解，面试的时候要提及，这个函数一般是在组件接收到一个新的props(更新）的时候被调用，但是使用的时候会出问题，所以现在有了一个替代函数:state getDerivedStateFromProps(nextProps,prevState)，这个的作用就是对比当前的props和之前的state的变化；
   • shouldComponentUpdate(nextProps,nextState):通过判断props和state的变化，来判断是否需要来更新，一般如果没有指定，就会默认自动更新
   • componentDidUpdate:组件更新后调用;
3. 生命周期第三个阶段：销毁
   componentWillUnmount()组件销毁后调用

具体来说，react组件的生命周期可以用下图来表示：

其实react生命周期远不止这些，但是记住常用的这些就够了，其他的基本不用，甚至会在后面被废弃掉，因为react越来越强调函数的使用，而生命周期的概念是类组件中的概念。