React中的getSnapshotBeforeUpdate（）是什么？

Question

我浏览了React的官方网站，了解新的生命周期方法 getSnapshotBeforeUpdate

但是我无法理解这种方法的优势以及确切的使用时间。

以下是来自docs的示例，它区分了两种方法。

getSnapshotBeforeUpdate(prevProps, prevState) {
// Are we adding new items to the list?
// Capture the scroll position so we can adjust scroll later.
if (prevProps.list.length < this.props.list.length) {
  const list = this.listRef.current;
  return list.scrollHeight - list.scrollTop;
}
return null;
}

componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
   // Adjust scroll so these new items don't push the old ones out of view.
   // (snapshot here is the value returned from getSnapshotBeforeUpdate)
   if (snapshot !== null) {
      const list = this.listRef.current;
       list.scrollTop = list.scrollHeight - snapshot;
    }
  }

Answer 1

主要的区别是getSnapshotBeforeUpdate运行前的更新，componentDidUpdate运行后。

因此，如果您需要保存任何内容，然后将其覆盖，这就是getSnapshotBeforeUpdate目的。这些通常是外部管理的东西（在React术语中不受控制），例如您示例中的scrollPosition，或者与React之外的其他库互操作时（例如jQuery插件）。

主要指导原则是，如果不确定，则可能不需要它。如果这样做，您会知道的。

Answer 2

您引用的示例上方的两段说明了这一点的必要性：

在上面的示例中，componentWillUpdate用于读取DOM属性。但是，对于异步渲染，“渲染”阶段生命周期（例如componentWillUpdate和render）与“提交”阶段生命周期（例如componentDidUpdate）之间可能会有延迟。如果用户在此期间进行了诸如调整窗口大小的操作，则从componentWillUpdate读取的scrollHeight值将过时。

解决此问题的方法是使用新的“提交”阶段生命周期，即getSnapshotBeforeUpdate。在进行突变之前（例如在更新DOM之前）立即调用此方法。它可以为React返回一个值，以作为参数传递给componentDidUpdate，在突变后立即被调用。

换句话说：React 16.6引入了一个名为“ Suspense”的新功能。此功能启用异步渲染-反应组件子树的渲染可以延迟（例如，等待网络资源加载）。React在内部也使用它来支持重要的DOM更新，以提高感知的渲染性能。可能会-导致反应侧虚拟DOM呈现（触发componentWillUpdate和render()，但可能包含一些必须等待的异步组件子树）和对DOM的实际反射（触发）之间的实质延迟componentDidUpdate）。在Suspense之前的较早版本中，这些生命周期钩子总是很少延迟地被调用，因为渲染是完全同步的，这证明了收集DOM信息componentWillUpdate并将其用于componentDidUpdate其中的模式是正确的，现在不再如此。