react笔记四：你可能不需要使用派生 state（解读--个人）

在React中，派生状态是指从组件的现有状态或属性中派生出的状态，派生状态不需要被显式地作为组件的state管理。React提供了React.useMemo和React.useCallback等钩子来帮助优化派生状态的性能。

如果你发现自己在多次渲染之间保持不变的数据上花费了不必要的性能，那么你可能需要重新考虑你的状态管理策略。

解决方案：

1. 使用React.useMemo来缓存派生状态，只有当依赖项变化时才重新计算。
2. 使用React.useCallback来缓存派生的事件处理函数，只有当依赖项变化时才重新创建新的函数。

例子代码：

function ParentComponent() {
  const [count, setCount] = useState(0);
 
  // 使用 useMemo 来缓存派生状态
  const doubleCount = useMemo(() => count * 2, [count]);
 
  // 使用 useCallback 来缓存派生的事件处理函数
  const incrementCount = useCallback(() => setCount(count + 1), [count]);
 
  return (
    <>
      <p>Count: {count}</p>
      <p>Double Count: {doubleCount}</p>
      <button onClick={incrementCount}>Increment</button>
    </>
  );
}

在这个例子中，doubleCount是从count派生来的，我们使用useMemo来缓存计算结果，避免在每次渲染时都重复计算。同时，incrementCount是一个事件处理函数，我们使用useCallback来保证在count不变化的情况下，它总是返回同一个函数引用，避免不必要的函数创建。