
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
3.2.1 useState
useState类似于React类组件中的state和setState,可维护和修改当前组件的状态。
useState是React自带的一个Hook函数,使用useState可声明内部状态变量。useState接收的参数为状态初始值或状态初始化方法,它返回一个数组。数组的第一项是当前状态值,每次渲染其状态值可能都会不同;第二项是可改变对应状态值的set函数,在useState初始化后该函数不会变化。useState的类型为:

initialState仅在组件初始化时生效,后续的渲染将忽略initialState:

如上例中的inputValue,当初始值传入另一个状态并初始化后,另一个状态函数将不再依赖inputValue的值。
使用Hooks的方式非常简单,引入后在函数组件中使用:

类似于setState,单击按钮时调用setCount更新了状态值count。当调用setCount后,组件会重新渲染,count的值会得到更新。
当传入初始状态为函数时,其仅执行一次,类似于类组件中的构造函数:

此外,useState返回的更新函数也可使用函数式更新:

如果新的state需要依赖先前的 state 计算得出,那么可以将回调函数当作参数传递给setState。该回调函数将接收先前的state,并将返回的值作为新的state进行更新。
注意,React规定Hooks需写在函数的最外层,不能写在if…else等条件语句中,以此来确保Hooks的执行顺序一致。