简单易懂的 React useState() Hook 指南
导读：状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。我更偏爱函数组件，因为它们足够简单，要使函数组件具有状态管理，可以useState( Hook。 本文会逐步讲解如何使用useState( Hook。此外，还会介绍一...
状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。我更偏爱函数组件，因为它们足够简单，要使函数组件具有状态管理，可以useState() Hook。
本文会逐步讲解如何使用useState() Hook。此外，还会介绍一些常见useState()坑。
1.使用 ——useState()—— 进行状态管理
无状态的函数组件没有状态，如下所示(部分代码)：
可以找 codesandbox 尝试一下。
运行效果：
这时，要如何添加一个按钮来打开/关闭灯泡呢？为此，咱们需要具有状态的函数组件，也就是有状态函数组件。
useState()是实现灯泡开关状态的 Hoook，将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我并在后台私信我：前端，即可免费获取。
1.1 启用状态
要将 转换为有状态组件，需要告诉 React：从'react'包中导入useState钩子，然后在组件函数的顶部调用useState()。
大致如下所示：
在Bulbs函数的第一行调用useState()（暂时不要考Hook的参数和返回值）。重要的是，在组件内部调用 Hook 会使该函数成为有状态的函数组件。
启用状态后，下一步是初始化它。
1.2初始化状态
始时，灯泡关闭，对应到状态应使用false初始化 Hook：
useState(false)用false初始化状态。
启用和初始化状态之后，如何读取它?来看看useState(false)返回什么。
1.3 读取状态
当 hook useState(initialState)被调用时，它返回一个数组，该数组的第一项是状态值
const stateArray = useState(false);
stateArray[0];
// =>
状态值
咱们读取组件的状态
function Bulbs() {
const stateArray = useState(false);
return ;
}
组件状态初始化为false，可以打开 codesandbox 看看效果。
useState(false)返回一个数组，第一项包含状态值，该值当前为false(因为状态已用false初始化)。
咱们可以使用数组解构来将状态值提取到变量on上：
import React, {
useState }
from 'react';
function Bulbs() {
const [on] = useState(false);
return ;
}
on状态变量保存状态值。
状态已经启用并初始化，现在可以读取它了。但是如何更新呢?再来看看useState(initialState)返回什么。
1.4 更新状态
用值更新状态
咱们已经知道，useState(initialState)返回一个数组，其中第一项是状态值，第二项是一个更新状态的函数。
const [state, setState] = useState(initialState);
// 将状态更改为 'newState' 并触发重新渲染
setState(newState);
// 重新渲染——state——后的值为——newState——
要更新组件的状态，请使用新状态调用更新器函数setState(newState)。组件重新渲染后，状态接收新值newState。
当点击开灯按钮时将灯泡开关状态更新为true，点击关灯时更新为 false。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 简单易懂的 React useState() Hook 指南
本文地址： https://pptw.com/jishu/658318.html