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

Question

网上有很多答案解释为什么我们 probably don't need derived state ，但它到底是什么？它“源自”哪里？为什么它很重要，它与 react 应用程序中处理状态的正确方法有何不同？

Answer 1

2022 年 7 月 2 日更新 - 在 React Hook 中

我们可以使用useMemo来获得基于缓存的 react 状态。

例如:

const firstName = useState('John');
const lastName = useState('Doe');

// fullName will be re-calculated only when firstName or lastName changes
const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);

<小时/>

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

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

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

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

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

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

事实上，一个 Prop 只更新一次，但重新渲染两次。

示例:

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

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

但是如果我们从 prop 计算输出值，我们就不需要这个 controlledValue 状态。那么该组件只会被重新渲染一次。