懒惰的初始状态--是什么，在哪里使用？

Question

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

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

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

但是我想不出这种惰性状态初始化有什么用处！

就像say am我的DOM正在呈现并且它需要状态值，但是我的useState还没有初始化它！！并且说，如果您已经呈现了DOM，并且Ustate ExpensiveComputation已经完成，DOM将重新呈现！！

任何帮助都是有用的！

Answer 1

传递给usestate的参数是initialstate，该值在第一次呈现中初始化状态，在后续呈现中被忽略。但是想象一下下面的情况

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

假设在每次呈现时都不必要地调用这个值（记住，即使在下一次呈现时忽略了初始值，初始化它的函数仍然会被调用）。

对于像这样的用例，不只是提供一个值，您可以传递一个返回初始状态的function，这个函数将只执行一次（初始呈现），而不是像上面的代码那样每次呈现

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