说说React生命周期有哪些不同的阶段?每个阶段对应的方法是?
-
挂载阶段:
- constructor():在react组件挂载之前,会调用它的构造函数
- ComponentWillMount():在render()方法之前调用,并且在初始化挂载及后续更新时都会被调用
- ComponentDidMount():在挂载之后(插入dom树中)立即调用
-
更新阶段:
- componentWillReceiveProps():在接收父组件改变后的props需要重新渲染组件时使用的比较多,外部组件频繁的时候会导致效率会比较低
- ShouldComponentUpdate():用于控制组件重新渲染的流程,在这return false 可以阻止组件的更新
- Render():render()方法是class组件当中唯一必须实现的方法
- ComponentWillUpdate():ShouldComponentUpdate()返回true后,组件进入重新渲染之前进入这个函数
- ComponentDidUpdate():每次改变state重新渲染页面后都会进入到这个生命周期
-
卸载销毁阶段
- ComponentWillUnmount():在此完成组件的卸载和数据的销毁
说说React生命周期中有哪些坑?如何避免?
react生命周期中的坑
-
componentWillMount在ssr中这个方法将会被重复触发很多遍同时在这里如果绑定事件,将无法解绑,会导致内存泄漏,变得不够安全高效逐步废弃
-
ComponentWillReceiveProps外部组件多次频繁的更新传入多次不同的props,会导致不必要的异步请求
-
ComponentWillUpdate更新前记录Dom状态,可能会做一些处理,与componentDidUpdate相隔时间如果过长,会导致状态不可信
如何避免
react中新的生命周期已经做出了改变,我们可以使用
-
getDerivedStateFromProps函数 替换 componentWillMount和componentWillReceiveProps生命周期函数
-
用getSnapshotBeforeUpdate函数替换componentWillUpdate方法,避免和componentDidUpdate函数中获取数据不一致的问题