Question

在线上有许多答案解释了为什么我们probably don't need derived state，但是究竟是什么呢？它是从哪里来的？为什么重要，它与React应用中处理状态的正确方法有何不同？

Answer 1

派生状态是主要依赖道具的状态。

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

在以上代码中，controlledValue是派生状态，取决于value属性。

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

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

我们知道，详细地说，当更改任何prop或状态时，它将重新渲染组件。然后，假设在以上代码中更改了value道具，然后它将尝试重新渲染组件，并且controlledValue的状态也会被更新。那也将尝试重新渲染。

因此，实际上，仅对道具进行了一个更新，但对两个进行了重新渲染。

示例：

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

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

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

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

1 个答案: