工作生活

React 生命周期

2019-11-29  本文已影响0人  succes

React 16.4 的生命周期图

早期React生命周期图

从图中,我们看到了一些变化

废弃的三个生命周期函数 componentWillMount,componentWillReceiveProps,componentWillUpdate。可以理解为带有Will都被干掉了。

新增方法:

1.getDerivedStateFromProps

React生命周期的命名一直都是非常语意话的,这个生命周期的意思就是从props中获取State。

这个函数是为了替代compontWillReceiveProps存在的,所以在你需要使用componentWillReceiveProps的时候,就可以考虑getDerivedStateFromProps来进行替代 了。

这个函数在每次re-render之前被调用,这意味着你的props没有任何变化,而父state发生了变化,导致子组件发生了re-render,这个生命周期函数依然会被调用。

它是一个静态函数,也就是这个函数不能通过this访问到class属性,也并不推荐直接访问属性。而是通过参数传递提供的nextProps以及preState来进行判断,根据传人的props来映射state。getDerivedStateFromProps 总是需要返回值,返回 null 表示不更新,而componentWillReceiveProps 需要调用setState去更新视图数据

static getDerivedStateFromProps(nextProps, prevState) {

  //根据nextProps和prevState计算出预期的状态改变,返回结果会被送给setState

}


2.getSnapshotBeforeUpdate

该函数会在render之后执行,而执行之时DOM元素还没有被更新,给了一个机会去获取DOM信息,计算得到一个snapshot,这个snapshot会作为componentDidUpdate的第三个参数传入。

getSnapshotBeforeUpdate(prevProps, prevState) {

    console.log('#enter getSnapshotBeforeUpdate');

    return 'foo';

  }

  componentDidUpdate(prevProps, prevState, snapshot) {

    console.log('#enter componentDidUpdate snapshot = ', snapshot);

  }


React生命周期的三个阶段

挂载阶段

constructor()

static getDerivedStateFromProps()

render()

componentDidMount()

更新阶段

static getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

注意:下述方法即将过时,在新代码中应该避免使用他们:

UNSAFE_componentWillUpdate()

UNSAFE_componentWillReceiveProps()

卸载阶段

componentWillUnmount()

错误处理

当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法:

static getDerivedStateFromError()

componentDidCatch()

其他 APIs

setState()

用来设置state的值

在16.3开始,议使用setState的异步函数写法,如:原先我们在使用的时候直接进行赋值:

this.setState({inputValue: e.target.value});

而是使用

This.setState(()=>{ Return { inputValue: value};})

异步方法中,该方法提供了一个回调函数,通过该回调函数,可以确保只有等到setState触法完成之后,才会执行执行回调

this.setState((prevState, nextState)=>{ ... }, callback);

forceUpdate()

调用forceUpdate()的时候,将会跳过ShouldComponent而直接render组件父组件中调用forceUpdate亦会导致自组件的生命周期被触发包括(componentDidUpdate)


为何移除 componentWillUpdate

大多数开发者使用 componentWillUpdate 的场景是配合 componentDidUpdate,分别获取 rerender 前后的视图状态,进行必要的处理。但随着 React 新的 suspense、time slicing、异步渲染等机制的到来,render 过程可以被分割成多次完成,还可以被暂停甚至回溯,这导致 componentWillUpdate 和 componentDidUpdate 执行前后可能会间隔很长时间,足够使用户进行交互操作更改当前组件的状态,这样可能会导致难以追踪的 BUG。

React 新增的 getSnapshotBeforeUpdate 方法就是为了解决上述问题,因为 getSnapshotBeforeUpdate 方法是在 componentWillUpdate 后(如果存在的话),在 React 真正更改 DOM 前调用的,它获取到组件状态信息更加可靠。

除此之外,getSnapshotBeforeUpdate 还有一个十分明显的好处:它调用的结果会作为第三个参数传入 componentDidUpdate,避免了 componentWillUpdate 和 componentDidUpdate 配合使用时将组件临时的状态数据存在组件实例上浪费内存,getSnapshotBeforeUpdate 返回的数据在 componentDidUpdate 中用完即被销毁,效率更高。


问题:

1.为什么componentWillMount被删掉componentDidMount还在?

componentDidMount() 会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。

上一篇下一篇

猜你喜欢

热点阅读