react-component-新生命周期

官方文档：https://reactjs.org/docs/react-component.html

 

 新增两个

• static getDerivedStateFromProps
  会在初始化和update时触发，用于替换componentWillReceiveProps，可以用来控制 props 更新 state 的过程；它返回一个对象表示新的 state；如果不需要更新，返回 null 即可
• getSnapshotBeforeUpdate（很少见）
  用于替换 componentWillUpdate，该函数会在update后 DOM 更新前被调用，用于读取最新的 DOM 数据，返回值将作为 componentDidUpdate 的第三个参数

 

constructor(props)
//getDerivedStateFromProps 内部不可以有副作用，因为现在是无论是state改变还是props改变，都会执行它。
static getDerivedStateFromProps(props, state)
componentDidMount()

shouldComponentUpdate(nextProps, nextState)
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState, snapshot)

static getDerivedStateFromError()   //后代组件抛出错误
componentDidCatch(error, info)      //后代组件抛出错误

//必须在一个条件下被包裹,就像下面的例子中，否则会导致无限循环。
componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

其他API

setState(updater[, callback])
component.forceUpdate(callback)  //forceUpdate()将导致render()在组件上调用
eg:  this.fetchData(this.props.userID);

 

遗留生命周期方法

UNSAFE_componentWillMount()
UNSAFE_componentWillReceiveProps(nextProps)
UNSAFE_componentWillUpdate(nextProps, nextState)