【hooks】useState初始化值 跟 useMome 初始化值从性能上来的区别

useState 和 useMemo 都可以用于在 React 组件中初始化值，但它们的用途和性能有所不同。以下是它们之间的主要区别及其在性能方面的影响：

1. useState 初始化

useState 钩子用于声明一个状态变量及其更新函数。当你传递一个初始值或初始值生成函数时，该值或函数只会在组件的第一次渲染时执行一次。

function Component() {
  const [count, setCount] = useState(() => {
    console.log("Calculating initial count...");
    return 10; // 假设这是通过计算得到的初始值
  });

  return <div>{count}</div>;
}

2. useMemo 初始化

useMemo 钩子用于缓存一个计算结果，只有在依赖项变化时才会重新计算。这意味着你可以将一些耗时的计算操作放在 useMemo 中，以避免在每次渲染时重复计算。

function Component() {
  const initialCount = useMemo(() => {
    console.log("Calculating initial count...");
    return 10; // 假设这是通过计算得到的初始值
  }, []);

  return <div>{initialCount}</div>;
}

性能比较

• 初始渲染时的差异：

  • useState 和 useMemo 在首次渲染时执行逻辑的方式类似，都是在首次渲染时执行一次初始化计算。因此，在初次渲染的性能上，两者差异不大。

• 后续渲染时的差异：

  • useState 的初始化函数只会在组件首次渲染时执行，后续渲染时不会再次执行。而 useMemo 会在依赖项变化时重新计算值。如果依赖项没有变化，useMemo 会返回缓存的值，因此避免了重复计算。
  • 对于需要基于某些依赖项（如 props 或状态）进行重新计算的情况，useMemo 比 useState 更具优势，因为它可以避免在依赖项未变时的多余计算。

示例对比

假设我们有一个复杂的计算函数，如果用 useState 初始化：

function Component({ num }) {
  const [value, setValue] = useState(() => {
    console.log("Calculating...");
    return complexCalculation(num); // 假设这是一个耗时的计算
  });

  return <div>{value}</div>;
}

无论 num 如何变化，useState 初始化函数只会在组件首次渲染时执行一次。如果 num 变化后需要重新计算值，需要通过 setValue 更新状态。

而用 useMemo 初始化：

function Component({ num }) {
  const value = useMemo(() => {
    console.log("Calculating...");
    return complexCalculation(num); // 假设这是一个耗时的计算
  }, [num]);

  return <div>{value}</div>;
}

每当 num 变化时，useMemo 会重新计算 value，而且如果 num 不变，useMemo 不会重新计算，性能表现优于每次重新渲染时都计算的情况。

总结

• 如果你只需要在组件首次渲染时初始化一个状态，并且之后不会因为依赖项的变化而重新计算，那么使用 useState 即可。
• 如果你需要基于某些依赖项在后续渲染时重新计算初始值，并且想避免重复计算，可以考虑使用 useMemo。

两者在初次渲染时性能差别不大，但在依赖项变化时，useMemo 可以显著减少不必要的计算，从而提升性能。