《React+Redux前端开发实战》—2.4.2 数据的更新过程

2.4.2  数据的更新过程

　　组件在挂载到DOM树之后，当界面进行交互动作时，组件props或state改变就会触发组件的更新。假如父组件render()被调用，无论此时props是否有改变，在render()中被渲染的子组件就会经历更新过程。一个组件的数据更新会经历下面几个过程：

•  static getDerivedStateFromProps()；

•  shouldComponentUpdate()；

•  componentWillUpdate()/UNSAFE_componentWillUpdate()；

•  render()；

•  getSnapshotBeforeUpdate()；

•  componentDidUpdate()。

　　数据更新可以分为下面两种情况讨论：

　　1．组件自身state更新

　　组件自身state更新会依次执行：

　　shouldComponentUpdate()—> render()—> getSnapBeforeUpdate()—> componentDidUpdate()

　　2．父组件props更新

　　父组件props更新会依次执行：

　　static getDerivedStateFromProps() —> shouldComponentUpdate()—> render()—>  getSnapBeforeUpdate()—> componentDidUpdate()

　　相对于自身state更新，这里多了一个getDerivedStateFromProps()方法，它的位置是组件在接收父组件props传入后和渲染前setState()的时期，当挂载的组件接收到新的props时被调用。此方法会比较this.props和nextProps并使用this.setState()执行状态转换。

　　上面两种更新的顺序情况基本相同，下面来看看它们分别有何作用和区别：

•  shouldComponentUpdate(nextProps, nextState)：用于判断组件是否需要更新。它会接收更新的props和state，开发者可以在这里增加判断条件。手动执行是否需要去更新，也是React性能优化的一种手法。默认情况下，该方法返回true。当返回值为false时，则不再向下执行其他生命周期方法。

•  componentDidUpdate(object nextProps, object nextState)：很容易理解，从字面意思就知道它们分别代表组件render()渲染后的那个时刻。componentDidUpdate()方法提供了渲染后的props和state。

注意：无状态函数式组件没有生命周期，除了React 16.7.0的新特性Hooks。