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

Question

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

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 将重新渲染！

Answer 1

传递给 useState 的参数是 initialState，该值在第一次渲染中初始化您的状态，并在后续渲染中被忽略。但是想象一下下面的情况

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

想象一下，在每次渲染时都不必要地调用它（记住 即使在下一次渲染时忽略了初始值，初始化它的函数仍然会被调用）。

对于这样的用例，您可以传递 function 初始状态 returns 而不是仅仅提供一个值，此函数将只执行一次（初始渲染），而不是每次都执行像上面的代码一样渲染 will

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

Lazy initial state - What it is and how to use it?