惰性初始状态-在哪里使用？

Question

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

https://reactjs.org/docs/hooks-reference.html

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

但我无法想到任何useCase都可以在这种懒惰的状态初始化中发挥作用！

就像说我的DOM正在渲染并且它需要状态值，但是我的useState尚未初始化它！并说如果您已经渲染了DOM并且useState ExpensiveComputation已经完成，那么DOM将重新渲染！

任何帮助将是有用的！

Answer 1

传递给的参数useState是initialState，该值将在第一个渲染中初始化您的状态，而在后续渲染中将忽略该值。问题是当您有以下情况时

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

想象一下，不需要每次渲染就调用此方法（请记住，即使在下一次渲染时忽略了初始值，仍会调用初始化它的函数）。

对于像这样的用例，您不仅可以传递一个function返回初始状态的值，还可以传递一个返回初始状态的值，该函数将仅执行一次（初始渲染），而不是像上面的代码那样在每个渲染上执行

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