State：组件的记忆
handleClick() 事件处理函数更新局部变量。但存在两个原因使得变化不可见：
- 局部变量无法在多次渲染中持久保存。 当 React 再次渲染这个组件时，它会从头开始渲染——不会考虑之前对局部变量的任何更改。
- 更改局部变量不会触发渲染。 React 没有意识到它需要使用新数据再次渲染组件。
要使用新数据更新组件，需要做两件事：
- 保留 渲染之间的数据。
- 触发 React 使用新数据渲染组件（重新渲染）。
useState Hook 提供了这两个功能：
- State 变量 用于保存渲染间的数据。
- State setter 函数 更新变量并触发 React 再次渲染组件。
Hook：useState
Hook 是特殊的函数，只在 React渲染时有效。它们能让你 “hook” 到不同的 React 特性中去。
Hooks ——以 use 开头的函数——只能在组件或自定义 Hook 的最顶层调用。 你不能在条件语句、循环语句或其他嵌套函数内调用 Hook。Hook 是函数，但将它们视为关于组件需求的无条件声明会很有帮助。在组件顶部 “use” React 特性，类似于在文件顶部“导入”模块。
用法：
const [index, setIndex] = useState(0);
React如何知道返回那个state
在useState调用时没有任何关于它引用的是哪个state变量的信息。
为了语法简洁，在同一组件的每次渲染中，Hooks都依托于一个稳定的调用顺序。 如果遵循上面的规则(“只在顶层调用Hooks")，Hooks将始终以相同的顺序被调用。
在React内部，为每个组件保存了一个数组，其中每一项都是一个state对。它维护当前state对的索引值，在渲染之前将其设置为0，每次调用useState时，React都会为你提供一个state对并增加索引值。
state是隔离且私有的
State 是屏幕上组件实例内部的状态。换句话说，如果你渲染同一个组件两次，每个副本都会有完全隔离的 state！改变其中一个不会影响另一个。
