1.3.1 useState

useState是一个与状态管理相关的Hooks，能让函数组件拥有状态，是最常用的Hooks之一，类型定义如下。

从类型定义可以看出，useState有两个重载，分别是传参数和不传参数。不论是否传参数，useState都返回一个长度为2的数组。数组的第一个位置是状态，可以是任何数据类型，类型参数S用于注释它的类型；第二个位置是一个用于更新状态的函数，为了方便介绍本小节将该函数记为setState。

接下来介绍useState的基本用法。

1.useState的参数不是函数

此时，useState的参数将作为状态的初始值，如果没有传参数，那么状态的初始值为undefined。用法如下。

UseStateWithoutFunc组件有name和age这两个状态，name只能是string类型，初始值为'何遇'，age的数据类型是number或undefined，初始值为undefined。

2.useState的参数是函数

此时，函数的返回值是状态的初始值。某些时候，状态的初始值要经过计算才能得到，此时推荐将函数作为useState的参数，该函数只在组件初始渲染时执行一次。用法如下。

上述useState的参数是函数，该函数的返回值是count的初始值。

3.修改状态的值

沿用上述代码中的setCount，修改状态有两种方式，具体如下。

如果setCount的参数是函数，那么count现在的值将以参数的形式传给该函数，函数的返回值用于更新状态。如果setCount的参数不是函数，那么该参数将用于更新状态。状态值发生变更将导致组件重新渲染，重新渲染时，useState返回的第一个值始终是状态最新的值，不会重置为初始值。

目前已经介绍完useState的基本用法，观察代码清单1-1所示代码，分析浏览器打印的结果。

代码清单 1-1

如果你理解1.1节中讲的知识，那么一定能轻而易举地分析出浏览器打印的值是0而不是1，这是因为在函数组件中取state和props拿到的都是本次渲染的值，在本次渲染范围内，props和state始终不变。

在代码清单1-1中调用setCount会导致组件重新渲染，在下一次渲染时count的值为1，但console.log（count）打印的是本次渲染时count的值，所以结果为0。