React Hooks，深度解析

2023-09-28 05:22:00

深入理解 useState 初始值的有效性：避免常见误区

useState 初始值：首次渲染的基石

在 React 的状态管理中，useState 扮演着至关重要的角色。它允许组件维护内部状态，从而随着时间的推移改变其外观和行为。然而，了解 useState 初始值的工作原理对于避免常见的陷阱至关重要。

首次渲染时的有效性

useState 的初始值仅在首次渲染时有效。这意味着，在组件的生命周期中对初始值进行任何后续修改都不会影响组件的状态。例如，考虑以下代码：

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }, []);

  return <div><h1>Count: {count}</h1></div>;
};

在这个例子中，我们使用 useState 创建了一个名为 count 的状态变量，并将其初始值设为 0。然后，我们使用 useEffect 钩子设置一个计时器，每隔一秒将 count 的值加 1。

然而，由于 useState 的初始值仅在首次渲染时有效，因此当计时器触发时，count 的值仍然为 0，而不是 1。这是因为 useEffect 是在组件渲染之后执行的，因此它无法捕获 useState 的初始值。

解决初始值有效性的方法

为了解决这个问题，我们可以将 count 状态变量的初始值设为一个函数，该函数返回当前时间戳。这样，计时器就可以在每次触发时获取到当前时间戳，并将其作为 count 的值。

const MyComponent = () => {
  const [count, setCount] = useState(() => Date.now());

  useEffect(() => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }, []);

  return <div><h1>Count: {count}</h1></div>;
};