我是新来回应胡克斯的人!我正在尝试在我的代码中使用useState。在使用它时,我发现了一个术语“惰性初始状态”
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});
但是我无法想到任何useCase,这种懒惰的状态初始化将很有用!
比如说我的DOM正在渲染,它需要 state 值,但是我的useState尚未初始化它!并说如果您已经渲染了DOM并且 useState ExpensiveComputation 已经完成,DOM将重新渲染!
任何帮助都是有用的!
答案 0 :(得分:9)
传递给useState
的参数是initialState
,该值将在第一个渲染中初始化您的状态,而在后续渲染中将被忽略。问题是当您遇到以下情况时
const Component = () =>{
const [state, setState] = useState(getInitialHundredItems())
}
想象一下,无需每次渲染就调用此方法(请记住,即使在下一次渲染时忽略了初始值,仍会调用初始化它的函数)。
对于像这样的用例,不仅可以提供一个值,还可以传递一个返回初始状态的function
,此函数将只执行一次(初始渲染),而不是像上面的代码那样在每个渲染上执行
const Component = () =>{
const [state, setState] = useState(() => getInitialHundredItems())
}