React 中的 useState() 是什么？

Question

我目前正在学习 React 中的钩子概念并试图理解下面的示例。

 import { useState } from 'react';

 function Example() {
 // Declare a new state variable, which we'll call "count"
 const [count, setCount] = useState(0);

 return (
 <div>
 <p>You clicked {count} times</p>
 <button onClick={() => setCount(count + 1)}>
 Click me
 </button>
 </div>
 );
 }

上面的例子增加了处理函数参数本身的计数器。如果我想在事件处理函数中修改计数值怎么办

考虑下面的例子：

 setCount = () => {
 //how can I modify count value here. Not sure if I can use setState to modify its value
 //also I want to modify other state values as well here. How can I do that
 }

 <button onClick={() => setCount()}>
 Click me
 </button>

原文由 Hemadri Dasari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 钩子 是一种新方法（仍在开发中），无需使用类即可访问诸如 state 之类的反应核心功能，在您的示例中，如果您想直接在处理程序函数中增加计数器而不直接在 onClick 道具中指定它，您可以执行以下操作：

 ...
 const [count, setCounter] = useState(0);
 const [moreStuff, setMoreStuff] = useState(...);
 ...

 const setCount = () => {
 setCounter(count + 1);
 setMoreStuff(...);
 ...
 };

和点击：

 <button onClick={setCount}>
 Click me
 </button>

让我们快速解释一下这一行发生了什么：

 const [count, setCounter] = useState(0);

useState(0) 返回一个元组，其中第一个参数 count 是计数器的当前状态，而 setCounter 是允许我们更新计数器状态的方法。我们可以在任何地方使用 setCounter 方法来更新 count 的状态——在这种情况下，我们在 setCount 函数内部使用它，我们可以做更多的事情；使用钩子的想法是，如果不需要/不需要，我们能够使我们的代码更具功能性并避免 _基于类的组件_。

我写了一篇关于钩子的完整文章，其中包含多个示例（包括计数器），例如 这个 codepen ，我使用了 useState 、 useEffect 、 useContext 和 _自定义钩子_。我可以详细了解钩子在这个答案上的工作原理，但是文档很好地详细解释了 状态钩子 和其他钩子，希望对您有所帮助。

更新： Hooks 不再是一个提案，因为 16.8 版它们现在可以使用，React 网站中有一个部分回答了一些 常见问题解答。

原文由 Enmanuel Duran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

让我们以简单的方式非常容易地理解 useState

假设我们有反应代码：-

index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import Test from './components/Test.jsx'
 ReactDOM.render(
 <div>
 <Test />
 </div>
 ,
 document.getElementById('root')
 );

测试.jsx

 import React from "react";

 function Test() {
 var x = 5;
 function update() {
 console.log(x);
 return x++;
 }
 return (
 <div>
 <h1>{x}</h1>
 <button onClick={update}>click</button>
 </div>
 );
 }
 export default Test;

在这里，页面将显示 5 ，虽然我们通过单击按钮调用更新功能，因为我们更新 x 但不是在 h1 标签之间，但实际上，每当我们点击时 x 都会不断变化，但它可以在控制台上看到

单击此链接查看结果并检查控制台

在这里 usState 神奇地工作，

使用 useState 的 Test.jsx

 import React, { useState } from "react";

 function Test() {
 var x = 5;
 const [value, setValue] = useState(x);

 function update() {
 setValue(value + 1);
 }

 return (
 <div>
 <h1>{value}</h1>
 <button onClick={update}>click</button>
 </div>
 );
 }
 export default Test;

点击此链接查看结果

在这里，通过单击按钮，值将不断更新，因为这里我们使用 useState ，它是一个函数，它返回两个东西一个是 当前状态值，另一个是 函数，如果我们将任何值传递给这个 函数，它将更新 当前状态 值并且 当前状态值 在它使用的所有地方更新其值，而无需编写任何额外的代码。

原文由 veer vikram 发布，翻译遵循 CC BY-SA 4.0 许可协议