react生命周期(老)——三个阶段
一.初始化阶段
componentWillMount
–即将挂载,render之前最后一次修改状态的机会
render–渲染页面,只能访问this.props和this.state,不允许修改状态
componentDidMount—挂载完成,render完成可以访问和修改页面DOM
注:初始阶段生命周期只在初始化时调用一次
二.运行中阶段
componentWillReceiveProps(nextProps)
:父组件修改属性触发,可接收到最新的props
shouldComponentUpdata(nextProps,nextState):是否允许页面更新,默认返回true,返回false会阻止render调用
componentWillUpdata
–即将更新,不能修改属性和状态,强行修改会导致内存泄露死循环
render–渲染页面,只能访问this.props和this.state,不允许修改状态
componentUpdata(prevProps, prevState,value)–完成更新,可以修改dom,第三个参数是配合新生命周期getSnapshotBeforeUpdate使用
三.销毁阶段
componentWillUnmount–在删除组件前进行清理操作,例如监听时间和倒计时
老生命周期存在的问题?(为什么会出现新的生命周期代替上述标红的生命周期?)
(1) componentWillMount
,在ssr(服务端渲染)中 这个方法将会被多次调用, 所以会重复触发多遍,同时在这里如果绑定事件,将无法解绑,导致内存泄漏 , 变得不够安全高效逐步废弃。
(2) componentWillReceiveProps
外部组件多次频繁更新传入多次不同的 props,会导致不必要的异步请求
(3) componetWillupdate
, 更新前记录 DOM 状态, 可能会做一些处理,与componentDidUpdate相隔时间如果过长, 会导致状态不太信,不够精准使数据产生偏差
注:在使用以上三个被逐步废弃的生命周期需要加上UNSAFE_前缀
新生命周期的替代
(1)static getDerivedStateFromProps(nextProps)–第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ,返回一个对象作为新的state,返回null则说明不需要在这里更新state。相当于替代了componentWillMount和componentWillReceiveProps
(2)getSnapshotBeforeUpdate取代了 componetWillUpdate ,触发时间为update发生的时候,在render之后dom渲染之前返回一个值,作为componentDidUpdate的第三个参数。