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

Question

我是反应 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 将重新渲染！

score 72 · Accepted Answer

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

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

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

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

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

1 回答 1