设置状态的初始值（checkpoint）

设置状态的初始值

初始化意味着设置某个东西的值。严格来说，初始化是指在创建或定义该对象时立即设置其值，而之后的赋值操作则称为“赋值”。不过为了简化理解，我们采用第一种定义。状态初始化模式的存在，是为了让自定义 Hook 的使用者能够轻松地设定“状态的初始值”。

需要注意的是，状态初始化模式并不能完全控制每次设置“状态值”的过程。它主要允许用户在初始化时设定状态，并在后续重置状态。

这并不等同于对状态值设置拥有完全控制权，但正如你即将看到的，它提供了类似的便利性。

在我们实现的自定义 Hook 中，做了如下操作：

1export default function useExpanded () {
2    // 注意这里 👇
3    const [expanded, setExpanded] = useState(false)
4    ...
5}

我们假设传入 useState 的初始状态始终为 false。

但这可能并不总是成立。

让我们通过一个参数让用户能够控制这个值。我们将这个参数命名为 initialExpanded，如下所示：

1export default function useExpanded (initialExpanded = false) {
2  const [expanded, setExpanded] = useState(initialExpanded)
3  ...
4  return value
5}

现在，用户可以在调用 useExpanded 自定义 Hook 时传入 initialExpanded，以决定组件的初始展开状态。

下面是一个示例：用户可能希望条款与条件内容默认处于展开状态：

1// 用户的应用程序
2function App () {
3  // 注意这里 —— 向 Hook 调用中传入 "true" 👇
4  const { expanded, toggle } = useExpanded(true)
5  return (
6    ...
7  )
8}

在之前的实现中，用户很难做到这一点，因为我们内部将初始状态硬编码为 false。

如你所见，这是一个简单却非常实用的模式。

快速小测验！

来测试一下吧！

---

在下一节课中，我们将学习如何重置状态！