react 生命周期函数
React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁初始化
初始化
getDefaultProps()
设置默认的props,可以用dufaultProps设置组件的默认属性
getInitialState()
在使用es6的class语法时是没有这个钩子函数的,我们可以直接在constructor中定义this.state。此时可以访问this.props
componentWillMount()
组件初始化时调用,以后组件更新就不用调用,整个生命周期只调用一次,此时
可以修改state
通过this.state
处理数据。
render()
render():react最
重要
的步骤,创建虚拟dom
,进行diff算法
,更新dom树
都在此进行。此时就不能更改state
了
componentDidMount()
组件渲染之后调用,只
调用一次
更新
componentWillReceiveProps(nextProps)
组件初始化时不调用,组件接受
新的props时
调用nextProps代表这次的props值,this.props代表上次props的值
shouldComponentUpdate(nextProps, nextState)
react
性能优化
非常重要的一环。
组件接受新的state
或者props
时调用,我们可以设置在此对比
前后两个props
和state
是否相同。
如果相同
则返回false阻止更新
,因为相同的属性状态一定会生成相同的dom树,
这样就不需要创造新的dom树
直接和旧的dom树
进行diff算法对比,节省大量性能
,尤其是在dom结构复杂
的时候
componentWillUpdata(nextProps, nextState)
组件初始化时不调用,只有在组件将要
更新
时才调用
render()
组件渲染。
只有在render的时候才真正被修改了
componentDidUpdate()
组件初始化时
不调用
,组件更新完成
后调用,此时可以获取dom节点
。
DOM 节点会作为最后一个参数
传入,可以使用this.getDOMNode()
来访问 DOM 节点
卸载
componentWillUnmount()
组件将要
卸载时
调用,一些事件监听
和定时器
需要在此时清除
。
由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数:
一些废弃的生命周期函数
componentWillMount -
组件初始化时调用
componentWillRecieveProps
componentWIllUpdate
一些新增的生命周期函数
Mounting (挂载阶段)
1. static getDerivedStateFromProps(nextProps, prevState)
用于替换componentWillReceiveProps.
这个生命周期的意思就是根据从props中获取state,实际上就是将传入的props映射到state上面。返回值是一个对象,这个对象的作用和setState一样用于更新state,返回值为null时,不更新state状态。提供给我们一个在渲染之前操作state的机会(慎用!)
该方法在每次render(渲染)被调用之前调用,意味着即使你的props没有任何变化,但因为state发生了变化,导致组件重新的render,这个生命周期函数依然会被调用。(父组件渲染导致了组件的重新渲染,即使子组件接收的属性没有更新,这一方法也会被调用)。
因为该方法为静态方法,所以内部不能使用this关键字
。也就是这个函数不能通过this访问到class的属性,也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断,根据新传入的props来映射到state。
Updating (更新阶段)
2.getSnapshotBeforeUpdate(prevProps, prevState)
用于替换 componentWillUpdate.
触发时间: update发生的时候,在render之后可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息(在虚拟DOM转化为真实DOM的前一刻自动调用。这个时间点getSnapshotBeforeUpdate可以用于读取即将被改变的数据);
这一生命周期返回的任何值将会 作为componentDidUpdate的第三个参数。配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法
错误边界:
当任何一个子组件在渲染过程中、在一个生命周期方法中、或在构造函数中发生错误时,这些方法会被调用
3.static getDerivedStateFromError(error)
在后代组件抛出错误后调用getDerivedStateFromError生命周期。它接收作为错误信息作为参数,并应该返回一个值去更新状态。
被调用是在 “渲染” 阶段,所以不允许副作用。
componentDidCatch(error, info)
任何一处的javascript报错会触发 类似于JS原生的try/catch。可以捕获错误,并处理
关于错误边界和捕获异常的生命周期函数,可以参考
https://react.docschina.org/docs/error-boundaries.html#component-stack-traces
文章根据https://reactjs.org/docs/react-component.html#static-getderivedstatefromerror