javascript - React 中的 useState() 是什么？

Question

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

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>

Answer 1

React hooks是一种新方法(仍在开发中)来访问 react 的核心功能，例如 state 而不必使用类，在您的示例中，如果您想直接在处理程序函数中增加一个计数器而不指定它直接在 onClick Prop 中，您可以执行以下操作:

...
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 函数内部使用它做更多的事情；使用钩子(Hook)的想法是，我们能够使我们的代码更实用，并在不需要/不需要的情况下避免基于类的组件。

I wrote a complete article about hooks with multiple examples (包括计数器)如this codepen ，我使用了 useState、useEffect、useContext 和自定义 Hook 。我可以详细了解钩子(Hook)如何处理这个答案，但文档很好地解释了 state hook和其他钩子(Hook)的详细信息，希望对您有所帮助。

更新: Hooks are not longer a proposal ，从版本 16.8 开始，它们现在可以使用了，React 网站上有一个部分回答了一些 FAQ .