【react】---17新增的生命周期

1、废除的生命周期

 

　　官网文档指出使用这些生命周期的代码会在将来版本的react中更容易产生bug，尤为是对于异步渲染的版本

　　因为将来采用异步渲染机制，因此即将在17版本中去掉的生命周期钩子函数

　　componentWillMount

　　componentWillRecieveProps

　　componentWIllUpdate

 

2、新增的生命周期

　　

　 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，不会将错误直接抛出了，保证应用的可用性)

 

3、基本使用

　　

class A extends React.Component { // 用于初始化 state  constructor() {} // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用 // 由于该函数是静态函数，因此取不到 `this` // 若是须要对比 `prevProps` 须要单独在 `state` 中维护  static getDerivedStateFromProps(nextProps, prevState) {} // 判断是否须要更新组件，多用于组件性能优化  shouldComponentUpdate(nextProps, nextState) {} // 组件挂载后调用 // 能够在该函数中进行请求或者订阅  componentDidMount() {} // 用于得到最新的 DOM 数据  getSnapshotBeforeUpdate() {} // 组件即将销毁 // 能够在此处移除订阅，定时器等等  componentWillUnmount() {} // 组件销毁后调用  componentDidUnMount() {} // 组件更新后调用  componentDidUpdate() {} // 渲染组件函数  render() {} }