react新版本生命周期

给componentWillMount componentWillReceiveProps componentWillUpdate生命周期加上UNSAFE_前缀，表明其不安全性，并将在未来版本将其移除

官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本 新增生命周期static getDerivedStateFromProps(prevProps, prevState)、getSnapshotBeforeUpdate(prevProps, prevState) 、componendDidCatch(error, info) 
static getDerivedStateFromProps(prevProps, prevState) 在每次渲染之前都会调用，不管造成重新渲染的原因，不管初始挂载还是后面的更新都会调用，这一点和UNSAFE_componentWillReceiveProps不同（只有当父组件造成重新渲染时才调用），每次都应该返回一个对象作为state的更新，或者返回null表示不更新 它的使用场景一般为依赖于props的变化去做一些状态的更新,让我们能够根据props的变化去更新内部的状态，以前我们经常在componentWillReceiveProps中完成该操作 但是你需要考虑是否真的有必要使用这个生命周期，比如： 如果你需要根据网络请求获取数据，你可以在componentDidUpdate里完成 当props改变时，你需要去重新计算某些数据，可以使用memoization helper替代 当props改变时，如果你想要重置一些state，可以考虑使用Fully controlled component(完全移出state的使用，通过父组件控制数据)或者Fully uncontrolled component(数据仅存在内部状态中)

getSnapshotBeforeUpdate（prevProps,prevState） 在最新的渲染数据提交给DOM前会立即调用，它让你在组件的数据可能要改变之前获取他们，他的返回值会被传递给componentDidUpdate的第三个参数 componentDidCatch 如果一个组件定义了componentDidCatch生命周期，则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误，就像使用了try catch，不会将错误直接抛出了，保证应用的可用性)

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() {}
  // 以下函数不建议使用
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillUpdate(nextProps, nextState) {}
  UNSAFE_componentWillReceiveProps(nextProps) {}
}

getDerivedStateFromProps内部不可以有副作用，因为现在是无论是state改变还是props改变，

都会执行它。

例如：

这种写法会导致多次循环渲染直到报错

class App extends Component { constructor(props){ super(props) this.myFetch=this.myFetch.bind(this) this.state = { name: "", list: null, myFetch:this.myFetch }; } static getDerivedStateFromProps(props, state) { if ( props.name !== state.name ) { // 这一句是有副作用的，它会改变state状态， // 然后再次调用getDerivedStateFromProps，再次改变state状态... state.myFetch(props.name) return { name: props.name }; } return null; } myFetch(){ this.setState({ list: "newList" }) } render() { return ( <div>{this.state.list}</div> ); } } 

以上正确写法应为：

class App extends Component { constructor(props){ super(props) this.myFetch=this.myFetch.bind(this) this.state = { name: "", list: null, //myFetch:this.myFetch }; } // 纯函数，无副作用 static getDerivedStateFromProps(props, state) { if ( props.name !== state.name ) { return { name: props.name, list: null }; } return null; } componentDidUpdate(){ if(!this.state.list){ this.myFetch(this.props.name) } } // 看是否需要初始化的时候调用 componentDidMount(){ this.myFetch(this.props.name) } myFetch(){ this.setState({ list: "newList" }) } render() { return ( <div>{this.state.list}</div> ); } }