React 中 getSnapshotBeforeUpdate 方法的作用是什么？

推荐答案

getSnapshotBeforeUpdate 是 React 生命周期方法之一，用于在 DOM 更新之前捕获一些信息（例如滚动位置）。它通常与 componentDidUpdate 配合使用，以确保在 DOM 更新后能够恢复某些状态。

本题详细解读

1. 方法定义

getSnapshotBeforeUpdate(prevProps, prevState) 是一个生命周期方法，在组件更新（即重新渲染）之前被调用。它接收两个参数：

• prevProps：更新前的 props。
• prevState：更新前的 state。

2. 返回值

getSnapshotBeforeUpdate 可以返回一个值（通常是 DOM 相关的信息，如滚动位置），这个返回值会作为第三个参数传递给 componentDidUpdate 方法。

3. 使用场景

• 保存滚动位置：在列表或表格等组件中，当内容更新时，可能需要保持用户的滚动位置不变。通过 getSnapshotBeforeUpdate 捕获当前的滚动位置，然后在 componentDidUpdate 中恢复。
• DOM 测量：在某些情况下，需要在 DOM 更新前测量某些 DOM 元素的尺寸或位置。

4. 示例代码

// www.javascriptcn.com code example
class ScrollList extends React.Component {
  listRef = React.createRef();

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 如果列表项增加，捕获当前的滚动位置
    if (prevProps.items.length < this.props.items.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 如果有 snapshot，恢复滚动位置
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef} style={{ overflow: 'auto', height: '200px' }}>
        {this.props.items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    );
  }
}

5. 注意事项

• getSnapshotBeforeUpdate 必须与 componentDidUpdate 配合使用，否则会抛出警告。
• 该方法仅在类组件中可用，函数组件中可以使用 useLayoutEffect 实现类似的功能。