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

Question

我是React Hooks的新手。我正在尝试在我的代码中使用useState。在使用它时，我发现一个术语“Lazy initial state”。

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将会重新渲染！

- Peter

---

这里让我困惑的是为什么要用 !!？单个 ! 不够吗？还有谦虚的 . 呢？ - marzelin

虽然问题已经得到解答，但我想分享一篇关于 React 的 useState 惰性初始化 的精彩博客文章，作者是 Kent C. Dodds。你也可以参考这篇文章以获得更好的理解。 - Amit Mondal

Answer 1

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

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

但请注意，每个渲染周期都会无条件地和不必要地调用getInitialHundredItems。

对于这种情况，你可以传递一个返回初始状态的函数，而不是仅仅调用一个返回值的函数。这个函数只会在初始渲染时执行一次，而不像上面的代码在每次渲染时都会执行。有关详细信息，请参见Lazy Initial State。

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

- Dupocas

---

请记住，即使在下一次渲染时忽略初始值，仍然会调用初始化它的函数。为什么要在后续渲染中调用初始化状态的函数？这个功能是包含在 react.js 中用于比较不同渲染状态的值吗？ - nibble

是的。但为了演示目的，() => func() 更容易理解。 - Dupocas

@Dupocas，“请记住，尽管在下一次渲染时初始值被忽略，但初始化它的函数仍然会被调用” - 这在官方文档中提到吗？如果是，我找不到。 - Abhinandan Khilari

@Dupocas，谢谢，但它只说“在随后的渲染中，initialState将被忽略”。但它并没有像“初始化它的函数仍然会被调用”这样的说明。我有漏掉了什么吗？ - Abhinandan Khilari

@Dupocas 抱歉，我不得不再读几遍你的答案才意识到你指出了一个假设情况，即某个计算初始值的函数由于不是惰性初始化函数而被无谓地直接调用了每个渲染周期。我原以为你中间那句话是在说惰性初始化器将会在每个周期被调用。 - Drew Reese