切换props场景下getDerivedStateFromProps的用法及性能问题咨询

1. 无条件复制prop到state的性能影响 #

这个操作本身没有可感知的性能损耗。你当前代码里只是把isScaffoldingMode赋值给state做变化前的快照存储，属于极轻量的对象操作，哪怕每次组件触发更新都执行也不会带来性能问题。如果要极致优化，可以先判断prop和之前存储的快照是否相等，相等的话直接返回null跳过state更新即可。

2. 该场景优先用getDerivedStateFromProps而非componentDidUpdate #

你的场景是基于prop变更同步state来驱动渲染，完全符合getDerivedStateFromProps的设计定位，比用componentDidUpdate好得多：

• componentDidUpdate在组件渲染完成后才触发，此时调用setState会触发额外的一轮完整渲染流程，等于一次prop变更会导致组件渲染两次，额外增加性能开销
• getDerivedStateFromProps是React官方提供的、专门用来处理「prop变化同步state」场景的API，替代原先不安全的componentWillReceiveProps，逻辑更可控

3. getDerivedStateFromProps不会触发额外重渲染 #

getDerivedStateFromProps执行时机在render函数调用之前，属于当前更新流程的一部分，你返回的新state会直接合并到本次更新的state中，和本次prop变更触发的渲染合并为一次，不会像componentDidUpdate里的setState那样触发额外的重渲染。如果返回的是null，React还会直接跳过本次state更新，甚至可以跳过不必要的渲染。

优化后的代码参考 #

static getDerivedStateFromProps(nextProps, prevState) {
  // Prop无变化时直接返回null，不更新state
  if (nextProps.isScaffoldingMode === prevState.prevIsScaffoldingMode) {
    return null
  }
  const newState = { prevIsScaffoldingMode: nextProps.isScaffoldingMode };
  if (nextProps.isScaffoldingMode) {
    const scaffoldingState = StandardItemComponent.prepareScaffoldingMode(nextProps);
    Object.assign(newState, scaffoldingState);
  }
  return newState;
}

内容的提问来源于stack exchange，提问作者Valentine Sokolovskiy