提问者:小点点

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


我是新来的反应钩!我正试图在我的代码中使用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将重新呈现!!

任何帮助都是有用的!


共1个答案

匿名用户

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

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

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

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

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