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)

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值