React 中的派生状态是什么，为什么它很重要？

Question

网上有很多答案解释为什么我们可能不需要派生 state，但它到底是什么？它是从哪里“衍生”出来的？为什么这很重要，它与 React 应用程序中处理状态的正确方式有何不同？

Answer 1

派生状态是一种主要依赖于 props 的状态。

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.controlledValue) {
    return {
      controlledValue: props.value + 1,
    };
  }
  return null;
}

在上面的代码中，controlledValue是一个依赖于valueprop的派生状态。

那我们为什么要避免使用这些派生状态呢？

答案很简单：减少不必要的重新渲染。

具体来说，正如我们所知，当任何 prop 或 state 发生变化时，它都会使组件重新渲染。那么我们假设value上面代码中的 props 发生了变化，那么它会尝试重新渲染组件，并且controlledValue状态也会更新。这也将尝试重新渲染。

所以实际上，对于一个道具只有一次更新，而是两次重新渲染。

例子：

render() {
  return (
    <div>
      <span>{this.state.controlledValue}</span> // same as this.props.value + 1
    </div>
  );
}

两行输出将相同，但是当 prop 更改时，组件应该重新渲染两次。

但是如果我们从 prop 计算输出值，我们不需要这个controlledValue状态。然后组件将只重新渲染一次。