复杂状态

到目前为止，我们已经看到如何在 React 状态中存储数字和字符串。然而，在许多实际情况下，我们的状态会更复杂，比如一个对象或一个数组。

例如：前一段时间，我制作了一个渐变生成器工具。用户可以选择 2 到 5 种颜色，我们将使用该状态生成一个渐变。

你将如何跟踪颜色的状态？

在我的情况下，我创建了一个 colors 状态变量。它保存了一个字符串数组：

const [colors, setColors] = React.useState(["#FFD500", "#FF0040"]);

React 并不关心我们状态的类型。我们可以存储数字、字符串、数组或对象。如果我们愿意，还可以在状态中存储函数*！

但有一个问题：React 状态变化必须是不可变的。当我们调用 setColors 时，我们需要提供一个全新的数组。我们绝不应该修改状态中持有的数组或对象。

不可变性是 JavaScript 中的一个重要议题，我们将在接下来的课程中以及整个课程中逐步深入。