【react】---17新增的生命周期
一、废除的生命周期
官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug
,尤其是对于异步渲染的版本
由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数
componentWillMount
componentWillRecieveProps
componentWIllUpdate
二、新增的生命周期
static getDerivedStateFromProps(nextProps, prevState) {}
用于替换componentWillReceiveProps,可以用来控制 props 更新 state 的过程;它返回一个对象表示新的 state;如果不需要更新,返回 null 即可
在每次渲染之前都会调用,不管初始挂载还是后面的更新都会调用,这一点和componentWillReceiveProps
不同(只有当父组件造成重新渲染时才调用
简单的理解就说从props中获取state,这个生命周期的功能实际上就是将传入的props映射到state上面
getDerivedStateFromProps
是一个静态函数,也就是这个函数不能通过this访问到class的属性,也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断,根据新传入的props来映射到state
如果props传入的内容不需要影响到你的state,那么就需要返回一个null,这个返回值是必须的,所以尽量将其写到函数的末尾
static getDerivedStateFromProps(nextProps, prevState) { const {type} = nextProps; // 当传入的type发生变化的时候,更新state if (type !== prevState.type) { return { type, }; } // 否则,对于state不进行任何操作 return null; }
getSnapshotBeforeUpdate() {}
在最近的更改被提交到DOM元素前,使得组件可以在更改之前获得当前值,此生命周期返回的任意值都会传给componentDidUpdate()。
用于替换 componentWillUpdate,该函数会在update后 DOM 更新前被调用,用于读取最新的 DOM 数据,返回值将作为 componentDidUpdate 的第三个参数
在最新的渲染数据提交给DOM前会立即调用,它让你在组件的数据可能要改变之前获取他们
componendDidCatch(error, info)
如果一个组件定义了componentDidCatch
生命周期,则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误,
就像使用了try catch
,不会将错误直接抛出了,保证应用的可用性)
三、基本使用
挂载生命周期
constructor
static getDerivedStateFromProps
render
componentDidMount
更新的生命周期
static getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
// 用于初始化 state constructor() {}
// 用于替换 `componentWillReceiveProps` ,该函数会在初始化和 `update` 时被调用 // 因为该函数是静态函数,所以取不到 `this` // 如果需要对比 `prevProps` 需要单独在 `state` 中维护 static getDerivedStateFromProps(nextProps, prevState) {}
// 判断是否需要更新组件,多用于组件性能优化 shouldComponentUpdate(nextProps, nextState) {}
// 组件挂载后调用 // 可以在该函数中进行请求或者订阅 componentDidMount() {}
// 用于获得最新的 DOM 数据 getSnapshotBeforeUpdate() {}
// 组件即将销毁 // 可以在此处移除订阅,定时器等等 componentWillUnmount() {}
// 组件销毁后调用 componentDidUnMount() {}
// 组件更新后调用 componentDidUpdate() {}
// 渲染组件函数 render() {}