React15
挂载过程
// 完成了React数据的初始化。 props、state
constructor()
// 组件已经完成初始化数据,但是还未渲染DOM时执行的逻辑
componentWillMount()
// DOM完成,网络请求
componentDidMount()
更新过程
// 接收父组件新的props时,重新渲染组件执行的逻辑。
componentWillReceiveProps(nextProps)
// 在setState以后,state发生变化,组件会进入重新渲染的流程时执行的逻辑。
// 在这个生命周期中return false可以阻止组件的更新,主要用于性能优化。
shouldComponentUpdate(nextProps,nextState)
// shouldComponentUpdate返回true以后,组件进入重新渲染的流程时执行的逻辑。
componentWillUpdate (nextProps,nextState)
// 页面渲染执行的逻辑,render函数把jsx编译为函数并生成虚拟dom,
// 然后通过其diff算法比较更新前后的新旧DOM树,并渲染更改后的节点。
render()
// 重新渲染后执行的逻辑。
componentDidUpdate(prevProps,prevState)
卸载过程
// 组件的卸载前执行的逻辑,比如进行“清除组件中所有的setTimeout、setInterval等计时器”或“移除removeEventListener”等操作。
componentWillUnmount()
React16
react16.4后使用了新的生命周期,使用
getDerivedStateFromProps
代替了旧的componentWillReceiveProps
及componentWillMount
。使用getSnapshotBeforeUpdate
代替了旧的componentWillUpdate
。在 Fiber 机制下,render 阶段是允许暂停、终止和重启的。废弃的生命周期钩子函数,它们都处于render阶段,都可能被重复执行。
由于React 16版本中对生命周期有所更改,所以这里介绍新老版本,现在一般不建议使用React15版本的,会报安全性警告
组件的挂载
React将组件渲染 > 构造DOM > 展示到页面的过程称为组件的挂载.
constructor()
constructor()是ES6中类的默认方法,通过new命令生成对象实例时自动调用该方法.其中的super()是class方法中的继承,它是使用extends关键字来实现的.子类必须在constructor()中调用super()方法,否则新建实例会报错.如果没有用到constructor(),React会默认添加一个空的constructor()
constructor()用来做一些组件初始化的工作,比如定义this.state的初始内容,继承父类获取props
class BaseWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'liuqiao'
};
}
render() {
console.log(this.props);
return (
<div>
{this.state.name}
</div>
);
}
}
static getDerivedStateFromProps(props,state)
组件在装载的时候,也就是组件在构建之后(虚拟DOM之后,实际DOM挂载之前),每次获取新的props或state之后,当props更改时触发,然后返回的对象将会与当前的状态合并,作为新的state,返回null则说明不需要更新state.
static getDerivedStateFromProps() {
console.log('getDerivedStateFromProps');
return null;
}
第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子)都会触发此生命周期. 一般不怎么使用这个钩子函数
render()
非常重要的钩子函数.React最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都会在此进行.
render() {
console.log('render');
return (
<div>
</div>
);
}
componentDidMount()
组件渲染之后,只调用一次,非常重要:表示dom准备就绪,动态数据请求已经初始化完成
componentDidMount() {
console.log('----componentDidMount');
// 开启长连接
// 开定时器
// 调接口
}
组件的数据更新阶段
static getDerivedStateFromProps(props,state)
只要props或state有更新,就会触发这个钩子函数,不常用
shouldComponentUpdate(nextProps, nextState)
用于判断组件是否需要更新.也就是相当于diff运算的开关,一般我们会在此钩子函数中进行相关的性能优化,比如我们设置在此对比前后两个props和states是否相同,如果相同则返回false阻止更新.因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候
组件接受新的state或者props时调用.默认情况下,该方法返回true,当返回值为false时,则不再向下执行其他生命周期方法.
componentWillUpdata(nextProps, nextState)
组件加载时不调用,只有在组件将要更新时才调用,此时可以修改state
最后一次更改props和state的机会,组件将要更新的时候触发
render()
重新再渲染一遍组件,更新dom树
getSnapshotBeforeUpdate()
在最近的更改被提交到DOM元素前,render()之后,使得组件可以在更改之前获得当前值,此生命周期返回的任意值都会传给componentDidUpdate()的第三个参数。’,不常用’
componentDidUpdate()
dom更新完成时,更新DOM节点的操作可放在这里进行。
数据更新可以分为2中情况:
组件自身state更新
shouldComponentUpdate()>render()>getSnapshotBeforeUpdate()>componentDidUpdate()
传递过来的props更新
static getDerivedStateFromProps()>shouldComponentUpdate()>render()>getSnapshotBeforeUpdate()>componentDidUpdate()
组件的卸载
componentWillUnmount()
在组件卸载之前调用,可以在此方法中执行任何需要清理的工作,比如定时器,事件回收,取消网络请求等等,或者清理在componentDidMount()中创建的任何监听事件等
componentDidMount() {
console.log('componentDidMount');
// 开启长连接
// 开定时器
// 调接口
this.timer=setTimeout(()=>{
console.log('开启定时器');
},1000);
}
//组件卸载阶段
componentWillUnmount(){
this.timer&&clearTimeout(this.timer);
}
异常处理
componentDidCatch()
在渲染期间,生命周期方法或构造函数constructor()中发生错误时,将会调用componentDidCatch()方法
componentDidCatch(error,info){
}
不会处理捕获到下面引发的错误
- componentDidCatch()本身错误
- 服务端渲染(SSR)
- 事件处理,因为事件处理不发生在React渲染时,报错不影响渲染
- 异步代码
总结(新老版本区别)
React16新的生命周期弃用了
componentWillMount,componentWillReceiveProps,componentWillUpdate
新增了getDerivedStateFromProps,getSnapshotBeforeUpdate
来代替弃用的三个钩子函数componentWillMount,componentWillReceiveProps,componentWillUpdate
React16并没有删除这三个钩子函数,但是不能和新的钩子函getDerivedStateFromProps,getSnapshotBeforeUpdate
数混用,React17将会删除componentWillMount,componentWillReceiveProps,omponentWillUpdate
新增了对错误的处理componentDidCatch