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

Question

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

https://reactjs.org/docs/hooks-reference.html#lazy-初始状态

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

但我想不出任何用例中这种懒惰的状态初始化会有用。

比如说我的DOM正在渲染，它需要state值，但我的useState还没有初始化它！然后说，如果您已经渲染了DOM，并且someExpensiveComputation已经完成，则DOM将重新渲染！

Answer 1

在初始渲染中传递给useState挂钩的值是初始状态值，在随后的渲染中被忽略。这个初始值可以是在以下情况下调用函数的结果：

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

但请注意，getInitialHundredItems在每个渲染周期上都被无条件地调用，并且被不必要地调用。

对于这样的用例，您可以传递一个返回初始状态的函数，而不是只调用一个返回值的函数。此函数将只执行一次(初始渲染(，而不是像上面的代码那样在每次渲染时执行。有关详细信息，请参见惰性初始状态。

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