React & State
在 React 中处理动态数据时该怎么办？使用 state！
与 props 不同，组件的状态可以在组件的生命周期内发生变化。如果 prop 发生变化，其父组件需要向下传递新的 props，子组件会根据这些新 props 重新构建自身。React Hook 的useState提供了一种维护和更新组件信息的方法，无需父组件持续地将动态信息作为 props 传递给子组件。
借助 React Hooks ，我们可以编写仅使用函数组件的 React 应用。useState是一个从 React 导入的函数，它是一个 React Hook，允许我们在函数组件内部“挂钩”到 React 的内部状态。导入后，你就可以在组件内部调用这个 Hook 了。
将其导入到组件文件中后，即可在函数组件内部调用它。
当在函数组件内部调用 `useState()` 时，它会创建一个新的动态状态变量，供该函数访问。该状态变量的初始值等于调用 `useState()` 时传入的参数。该参数可以是任何原始值：字符串、整数、布尔值、null 等。`useState()` 还会返回一个包含两项内容的数组。第一项是状态变量的当前值。第二项是用于更新状态变量的 setter 函数。
状态变量非常简单明了，它代表了当前状态。这个变量的值可以改变，可以通过 setter 函数进行更新。setter 函数的作用就是设置或更新状态。要更新状态，需要调用 setter 函数。这个函数还会重新渲染组件。重新渲染时，它会告诉 React 再次调用 setter 函数，并根据新的状态判断发生了什么变化以及应该返回什么值。
useState 分步回顾：
- 导入 useState hook：
- 设置初始状态，变量和设置函数使用相同的命名约定。
- 例如：[state, setState] 或 [banana, setBanana] 或 [fooBar, setFooBar] 等等，你明白我的意思了。
- 在组件中使用状态变量。
- 调用 setter 函数来更新状态。
一个例子
这里，当按钮元素被点击时，会执行递增函数。该函数会调用 setCount 函数将计数变量加一，并重新渲染组件。
网站加载时，初始渲染是通过 `ReactDOM.render()` 实现的，它会调用所有组件一次来构建所有初始 JSX。之后，当应用程序中某个组件的状态更新时，`useState` 的 `setState` 函数会使用新的状态重新渲染该组件及其所有子组件。此后，每次状态修改时，React 都会自动重新渲染该组件及其子组件，并根据这些新值更新 DOM。
状态仅用于存储组件生命周期内预期会发生变化的值，即动态值。因此，仅在必要时使用状态。状态越多，跟踪所有变化就越困难。
那么，什么时候应该使用状态呢？
确定州的三个关键问题：
- 它是通过 props 从父级传递过来的吗？
- 如果真是这样，那它就不是国家！
- 能否根据组件中的其他状态或属性进行计算？
- 是吗？不是州！
- 它是否会随时间推移而保持不变？
- 如果真是这样，那就不是国家行为体了！！！
通常，多个组件需要反映相同的动态数据，因此需要将状态提升到它们最近的共同父组件，然后作为属性传递给子组件。
在使用数组和更新状态时，切勿直接修改数组！最好创建数组副本，因为 React 只会在状态更新时重新渲染组件。这意味着，在调用 setter 函数时，需要复制原始数组，而不是直接修改原始数组并传递指向该数组的引用。此外，务必确保永远不要直接修改状态。
需要向数组中添加元素吗？使用扩展运算符！您将获得一个包含新值的数组副本。
需要从数组中移除某些元素吗？使用 filter 函数！filter 函数会根据回调函数中指定的条件返回一个新数组。
需要更新数组吗？用 Map 函数吧！Map 函数会返回一个新数组，而不会改变原数组！
🔥🔥🔥小技巧： React Dev Tools（Chrome / Firefox）可以查看每个组件的状态。
参考
React 官方文档“关于状态：
如何使用数组管理 React 状态”