[译]浅析 React 的 useState Hook

作者：Rahul。本文翻译自：dev.to/rahxuls/wha…

什么_是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）是初始_状态_。这实质上意味着 apples = 0。set Apples是一个可以用来改变苹果值的函数。

这里到底发生了什么？

每当我们调用use State时，它都会返回一个只有两个元素的数组。第一个是状态变量，第二个是更新状态变量的函数。所以我们也可以写：

1 const apples = useState(0);

在这种情况下，苹果是一个正好有两个元素的数组。我们可以访问商店变量作为apples[0]和更新apples[0]的函数和更新apples[0]的函数作为apples[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函数的引用。我们不能使用括号（如： Apple Handler（）），也不能_直接使用set Apples来更新状态，因为这将在呈现DOM并将代码发送到inf inte循环时立即执行函数。我们只希望在单击按钮时执行Apple Handler。我们也可以通过使用匿名函数来做到这一点：

<button onClick={() => setApples(apples + 1)}>Increase Apples </button>

前面例子中的第16行可以用上面的代码代替，并且工作原理相同。然而，使用处理程序函数来更改状态是一个很好的实践。