使用 useState 管理状态 (State)

React 课程的一部分

到目前为止你写的每个组件，只要传进去的属性相同，渲染出来的结果就永远相同。对一个标题或一张卡片来说这没什么问题，但只要需要让用户盯着页面就能改动点什么，它立刻就撑不住了：点一下就往上加的计数器、能来回翻转的开关、把你刚敲进去的内容显示出来的文本框。普通的 JavaScript 变量干不了这活。假如你在组件里写 let count = 0;，再在事件处理函数里更新它，React 根本不会知道这个值变了，因为组件里的局部变量每次渲染都会重新造一遍，函数一跑完就被丢掉。你需要一种方式告诉 React：“把这个值在多次渲染之间记住，而且它一变就重新渲染我。”这正是状态的含义，而 useState 就是给组件分配一份专属状态的工具，这类工具叫做钩子 (hook)。

把组件的每一次渲染都想成一张照片：在某个瞬间拍下来，记录的是当时那份属性和那份状态下组件的样子。调用组件函数时，JavaScript 从上到下正好跑一遍，产出一张快照，也就是它返回的那段 JSX。函数里声明的每个普通变量都是为这一张快照现造出来的，拍完就扔。所以它们靠自己没办法在多次渲染之间留住任何东西。