React中的useState（）是什么？

小编典典

React中的useState（）是什么？

reactjs

我目前正在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>

阅读 767

2020-07-22

共1个答案

小编典典

React钩子是访问React核心功能的一种新方法（仍在开发中），例如state无需使用类，在您的示例中，如果您想直接在处理函数中增加计数器而不在onClickprop中直接指定它，您可以可以做类似的事情：

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

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

和onClick：

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

让我们快速解释一下这一行的情况：

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

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

我写了多个例子挂钩一个完整的文章（包括计数器）如本codepen，我利用了useState，useEffect，useContext，和
自定义挂钩 。我可以深入了解钩子如何在此答案上工作，但是文档在解释状态钩子和其他钩子方面做得很好，希望对您有所帮助。

更新：
钩子不再是一个建议，因为版本
16.8 可以使用了，因此React网站上有一个部分可以回答一些FAQ。

2020-07-22