介绍
useState 是最基本和最广泛使用的内置 React Hook 之一。这些是简单的 JavaScript 函数，有助于功能组件中的状态管理。就像任何其他 javascript 函数一样，以同样的方式调用 Hooks function_name(arguments)😳
在受控组件中，值由状态更改或更新，不受事件处理程序控制，并在状态或道具更改时重新呈现。useState 有助于保留重新渲染之间的状态，并向功能组件添加 React 状态。
本文作为 React 中 useState Hook 的完整指南，相当于this.state/this.setState功能组件。
什么是 useState Hook？🤷♀️
这是一个简单直接的定义——它允许在功能组件中进行状态管理。
这些是允许功能组件“挂钩”React 状态和生命周期特性的简单函数。
注意：钩子在类中不起作用——它们使用没有类的 React。
什么时候使用它？
当函数退出时，变量通常会消失。useState 是在变量生命周期后保留变量状态的解决方案，即 React 将在重新渲染之间保持状态。
语法📝
首先导入 useState，然后在组件顶部声明它。useState 接受初始状态并返回具有 ✌ 值的数组：
- 一个保存值（状态）的状态变量，以及
- 用于更新状态变量值的异步函数。
import React, { useState } from "react";
const getExistingColors = () => {
const colorState = useState("red"); // Declaration
const color = colorState[0]; // Returns the value red
const setColor = colorState[1]; // Returns function to update the value
}
这是演示的链接
注意：useState Hook 一次只声明一个状态变量（任何类型）。
方括号是什么意思？它有助于通过colorState[0]和访问值colorState[1]。这可能会导致混乱。出于这个原因，数组解构是首选。
解构使得从数组中提取数据变得非常简单和可读。想象一下，尝试从具有五或六层的嵌套数组中提取数据将是多么耗时。相反，在赋值的左侧使用数组文字。
const rainbow = ["orange", "yellow", "green", "blue"];
const [orange, yellow, , blue, red] = rainbow;
console.log(orange) // Output: orange
console.log(yellow) // Output: yellow
console.log(blue) // Output: blue
console.log(red) // Output: undefined
这是演示的链接
简单来说，析构 useState Hook 的返回值。
useState Hook 的签名如下：
const [state, setState] = useState(initialState);
这里需要注意两点：一是 Hook 的参数，二是返回值。初始状态参数仅在第一次渲染期间使用，它可以存储 Array、Object、String、Number、Boolean 或 Null。
注意：useState Hook 返回一个数组，因为它更灵活且易于使用。如果返回的类型是一个具有一组固定属性的对象，那么它就不能那么容易地重命名变量。
如何使用它？🗞
setState要更新状态，请使用新的状态值调用函数setState(newStateValue) 。状态不能直接改变。要更改状态值，请调用返回的函数来更新它，因为状态被认为是不可变的。😯
const [color, setColor] = useState("red);
color = "green"; // Doesn't change the value of color
setColor("green"); // The color state holds the new value green
setColor("green"); // Does not re-render again
这是演示的链接
在上面的示例中，请注意setColor不会合并旧值和新值，而是替换为提供的新值。
注意：如果更新函数返回与当前状态相同的值，则跳过后续的重新渲染。
实施
现在 useState 的基本原理已经很明显了，让我们来看看 Hook 的各种用例👀
多个 Hooks 处理🤹♀️
代码片段显示了更新 Hooks 的两个不同调用。
const [phoneColor, setPhoneColor] = useState("black");
const [headsetColor, setHeadSetColor] = useState("red");
function updateTheColorsToBuy() {
setPhoneColor("blue");
setHeadSetColor("purple");
}
这是演示的链接
React 只会生成一个重新渲染，即使两个更新器函数被一个接一个地调用以通过避免过多低效的重新渲染来保持良好的性能。
当updateTheColorsToBuy函数被调用时，React 会批量更新状态，并在所有状态更新的最后重新渲染。
如果 React 不支持批量更新并且每次 Hook 更新时都重新渲染会发生什么？这会导致严重的性能问题、增加加载时间或导致应用程序崩溃。
注意：重新渲染是一项昂贵的操作；同步状态更新会影响应用程序的运行状况。
基于现有状态的新状态
当新状态依赖于现有状态值时——例如，计算或值——使用功能状态更新。
const [color, setColor] = useState("yellow");
setColor((prevColor) => {
return "light" + prevColor;
});
这是演示的链接
将函数参数传递给setColor. 在内部，React 将以现有状态作为参数调用此函数，并将此函数的返回值设置为新状态。由于setColor是异步的，React 保证前一个color是准确的。
从函数初始化状态😎
当必须从函数初始化 Hook 时，可以通过以下方式完成。
const [color] = useState(() => {
let tempColor = window.localStorage.getItem("color");
return tempColor || "blue";
});
这是演示的链接
由于初始化仅在第一次渲染时发生，如果初始状态是由昂贵的计算产生的，则传递一个函数，该函数将仅在初始渲染时调用，这称为延迟初始化状态。
const [color, setColor] = useState(
() => yourExpensiveColorComputation(props)
)
避免依赖
功能更新器帮助我们避免对 useEffect、useMemo 或 useCallback 的依赖。但也有我们可能想要的用例。
const [phoneColor, setPhoneColor] = useState("black");
const [headsetColor, setHeadSetColor] = useState("red");
// add dependencies to prevent ESLint warning
useEffect(() => {
setPhoneColor("red");
}, []);
// Runs the callback only on mount
useEffect(() => {
setHeadSetColor("black");
}, [setHeadSetColor]);
这是演示的链接
UseState 与对象 ✨
包含对象的 Hook 不能直接更新。如果调用函数更新器并直接传递参数，则 Hook 中的值不会合并而是被替换。要合并，可以使用扩展运算符 (...)，将其放入新对象中，或者使用Object.assign()
const [buyColors, setBuyColors] = useState(
{ paints: 19, crayons: 4 }
);
setBuyColors({ paints: 25 });
// This will result in replacing the values of buyColors
// buyColors will now hold => { paints: 25 }
setBuyColors({
...buyColors,
paints: 25
})
// Whereas, this will result in updating the buyColors Hook
// buyColors will now hold => { paints: 25, , crayons: 4 }
这是演示的链接
要了解对象数组如何与 Hook 一起使用，请查看演示。
结论
useState 的有趣之处在于，它只不过是底层的数组声明。使用时，它返回两个数组元素，第一个是变量，第二个是更新变量的函数。
练习这个 Hook 并用它构建项目将帮助你更快地学习它。
感谢您阅读本文😊在下一篇文章中，将介绍一些高级主题，要遵循的规则以及使用此钩子时要避免的错误。敬请期待，加油！
请随时在下面的评论中提问。
文章来源：https://rashmisubhash.hashnode.dev/complete-beginners-guide-on-the-usestate-hooks
网友评论