挂载阶段
constructor()
react在创建的时候调用这个函数,用来做一些组件的初始化工作
static getDerivedStateFromProps()
在组件创建时和更新时的render方法之前调用,它应该返回一个对象来更新state,或者返回null来不更新任何内容。 (componentWillMount,componentWillReceiveProps,componentWillUpdate)都被getDerivedStateFromProps替代
render()
渲染数据调用的函数
componentDidMount()
组件挂载到DOM后调用,且只会被调用一次。 ajax请求,更新状态,进入运行时阶段,更新视图,还可以实例化一些对象
更新阶段
当组件的 props 或 state 发生变化时会触发更新
static getDerivedStateFromProps()
shouldComponentUpdate()
是否阻止更新视图,比较nextProps,nextState及当前组件的this.props,this.state,返回true表示不阻止,返回false表示阻止。以此可用来减少组件的不必要渲染,优化组件性能。
render()
getSnapshotBeforeUpdate()
触发时间: update发生的时候,在render之后,在组件dom渲染之前;返回一个值,作为componentDidUpdate的第三个参数;配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法 可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息(例如滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
componentDidUpdate()
数据更新完成时触发的函数。此方法在组件更新后被调用,可以操作组件更新的DOM,prevProps和prevState这两个参数指的是组件更新前的props和state。
卸载阶段
componentWillUnmount()
组件将要销毁时触发的函数。此方法在组件被卸载前调用,可以在这里执行一些清理工作。清除一些计时器,定时器等。
错误处理
当渲染过程,生命周期,或子组件的构造函数中抛出错误时,
static getDerivedStateFromError()
后代组件引发错误后,将调用此生命周期方法。它接收作为参数抛出的错误,并且应返回值以更新状态
componentDidCatch()
用以捕获在子组件树中任何地方的 JavaScript 异常,打印这些错误,并展示备用 UI 而非让组件树崩溃。错误边界会捕获渲染期间,在生命周期方法中以及在其整个树的构造函数中的异常。
参考学习链接: react.docschina.org/docs/react-… www.jianshu.com/p/514fe21b9…