惰性初始状态 - 它是什么以及如何使用它？

我是新来反应 Hooks 的。我正在尝试利用useState在我的代码中。当我使用它时，我发现了一个术语“惰性初始状态”

https://reactjs.org/docs/hooks-reference.html#lazy-initial-state https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

但我无法想到这种延迟初始化状态会有用的任何用例。

就像我的 DOM 正在渲染一样，它需要state值，但是我的useState还没有初始化呢！并说如果你已经渲染了 DOM 和someExpensiveComputation完成后，DOM 将重新渲染！

传递给的值useState初始渲染中的 hook 是初始状态值，在后续渲染中将被忽略。该初始值可以是调用函数的结果，如下所示：

const Component = () => {
  const [state, setState] = useState(getInitialHundredItems())
}

但请注意getInitialHundredItems is 无条件地 and 不必要地在每个渲染周期调用。

对于这样的用例，而不是仅仅调用返回的函数a value您可以传递一个返回初始状态的函数。该函数只会执行一次（初始渲染），而不是像上面的代码那样在每次渲染上执行。看惰性初始状态 https://reactjs.org/docs/hooks-reference.html#lazy-initial-state了解详情。

const Component = () =>{
  const [state, setState] = useState(getInitialHundredItems)
}