【hooks】useState初始化值的几种高级用法

在 React 中，useState 钩子用于声明状态变量。初始化状态的高级用法主要包括以下几种场景：

1. 延迟初始化

通常我们会传递一个初始值给 useState，但当初始值的计算比较复杂时，可以通过传递一个函数给 useState 来延迟初始化。这个函数只会在组件首次渲染时调用一次，从而避免在每次渲染时都执行该复杂计算。

function Component() {
  const [count, setCount] = useState(() => {
    const initialCount = complexCalculation();
    return initialCount;
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function complexCalculation() {
  console.log("Running complex calculation...");
  return 42; // 假设这是一个复杂计算的结果
}

2. 基于 props 或其他外部因素的初始化

你可以根据传入的 props 或其他外部因素来初始化 useState 的值，这在需要根据上下文动态生成初始状态时非常有用。

function Component({ initialValue }) {
  const [value, setValue] = useState(() => initialValue * 2);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

3. 利用函数生成状态

在某些情况下，状态值需要根据当前的某些动态数据来生成。可以通过函数生成初始状态，确保初始化时是基于最新的数据。

function Component({ items }) {
  const [selectedItem, setSelectedItem] = useState(() => items[0]);

  return (
    <div>
      <p>Selected: {selectedItem}</p>
      <button onClick={() => setSelectedItem(items[1])}>Select Another</button>
    </div>
  );
}

4. 动态更新 useState 的初始值

虽然 useState 的初始值在第一次渲染后无法直接更新，但可以通过某种逻辑控制，使得状态初始化看起来像是动态的。例如，结合 useEffect 和 useState 来监听外部变化并更新状态。

function Component({ userId }) {
  const [userData, setUserData] = useState(() => fetchUserData(userId));

  useEffect(() => {
    setUserData(fetchUserData(userId));
  }, [userId]);

  return (
    <div>
      <p>User Data: {JSON.stringify(userData)}</p>
    </div>
  );
}

function fetchUserData(id) {
  // 模拟获取用户数据的操作
  return { id, name: `User ${id}` };
}

总结

通过传递函数来初始化 useState 的值，不仅能够避免不必要的计算，还能使得代码更加灵活和高效，尤其是在处理复杂或依赖外部数据的场景下。