原文链接：dev.to/rahxuls/wha… 作者：Rahul
use State Hook in React-使用use State Hook in React管理状态的完整指南。
什么是use State钩子？
您已经熟悉了反应中状态的概念（Ig not，请参考本系列）。
前面我们可以只在基于类的组件中声明状态变量。use State钩子允许我们在函数组件中使用状态。
调用use State（）做什么？
简单来说，它声明“状态变量”。
语法：
import React. { useState } from 'react';
const App = () => {
// Declare a new state variable, which we'll call "apples"
const [apples. setApples] = useState(0);
// Other codes...
}
传递给use State Hook的参数（在本例中为0）是初始状态。这实质上意味着苹果**=0**。set Apples是一个可以用来改变苹果值的函数。
这里到底发生了什么？
每当我们调用use State时，它都会返回一个只有两个元素的数组。第一个是状态变量，第二个是更新状态变量的函数。所以我们也可以写：
1 const apples = useState(0);
在这种情况下，苹果是一个正好有两个元素的数组。我们可以访问商店变量作为苹果[0]和更新苹果[0]的函数和更新苹果[0]的函数作为苹果[1]。因为我们知道use State总是返回两个元素，所以我们可以使用数组析构来获得：
1 const [apples, setApples] = useState(0);
没有必要将第二个元素命名为set Applers。我们可以随意调用它。但是惯例是这样命名它，因为它使代码更具可读性。
但是为什么我们需要一个函数来更新状态变量呢？
在vanilla JavaScript中，您可以将变量更新为：
let apples = 0;
apples - apples + 1;
但这在React中是不允许的。在反应中，每当您想更新Apple变量*（或*任何其他状态变量）时，您都需要调用set Apples（或任何您命名的函数）。
如何更新状态变量？
让我们看看这个例子
import React, { useState } from "react";
const App = () => {
// Declare the state variable
const [apples, setApples] = useState(0);
//Function to handle the update
const appleHandler = () => {
const appleHandler = () => {
setApples(apples + 1); //Update the number of apples
}
return (
<div>
{/*Display the number of apples*/}
<p>{apples} Apples</p>
<button>onClick={appleHandler}> Increase Apples</button>
</div>
);
//Button
};
};
export default App;
在这里您可以看到我们正在使用一个按钮（第16行）来调用*Apple Handler（*您可以给任何您想要的名称）函数的引用，该函数调用set Apples函数来更新Apple的值。
请注意，onLink事件仅调用Apple Handler函数的引用。我们不能使用括号（如： AppleHandler**（）），也不能直接使用set Apples来更新状态，因为这将在呈现DOM并将代码发送到inf inte循环时立即执行函数。我们只希望在单击按钮时执行Apple Handler。我们也可以通过使用匿名函数来做到这一点：
<button onClick={() => setApples(apples + 1)}>Increase Apples </button>
前面例子中的第16行可以用上面的代码代替，并且工作原理相同。然而，使用处理程序函数来更改状态是一个很好的实践。
💻感谢阅读|Happy Coding🥂
