React 中的 useState() 是什么? [英] What is useState() in React?

问题描述

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

import { useState } from 'react';函数示例(){//声明一个新的状态变量，我们称之为count"；const [count, setCount] = useState(0);返回 (<div><p>您点击了 {count} 次</p><button onClick={() =>setCount(count + 1)}>点击我

);}

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

考虑以下示例:

setCount = () =>{//我如何在这里修改计数值.不确定我是否可以使用 setState 来修改它的值//我也想在这里修改其他状态值.我怎样才能做到这一点}<button onClick={() =>setCount()}>点击我

解决方案

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

<代码>...const [count, setCounter] = useState(0);const [moreStuff, setMoreStuff] = useState(...);...const setCount = () =>{设置计数器(计数 + 1)；setMoreStuff(...);...};

和点击:

点击我

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

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

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

我写了一篇关于带有多个示例的钩子的完整文章(包括计数器)，例如 this codepen，我使用了 useState、useEffect、useContext 和 custom hooks.我可以详细了解钩子如何处理这个答案，但文档很好地解释了 状态钩子 和其他钩子的详细介绍，希望对您有所帮助.

更新: 钩子不再是一个提议，因为版本 16.8 现在可以使用它们，React 站点中有一个部分回答了一些 常见问题.

I am currently learning hooks concept in React and trying to understand below example.

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>
  );
}

The above example increments the counter on the handler function parameter itself. What if I want to modify count value inside event handler function

Consider below example:

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>

解决方案

React hooks are a new way (still being developed) to access the core features of react such as state without having to use classes, in your example if you want to increment a counter directly in the handler function without specifying it directly in the onClick prop, you could do something like:

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

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

and onClick:

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

Let's quickly explain what is going on in this line:

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

useState(0) returns a tuple where the first parameter count is the current state of the counter and setCounter is the method that will allow us to update the counter's state. We can use the setCounter method to update the state of count anywhere - In this case we are using it inside of the setCount function where we can do more things; the idea with hooks is that we are able to keep our code more functional and avoid class based components if not desired/needed.

I wrote a complete article about hooks with multiple examples (including counters) such as this codepen, I made use of useState, useEffect, useContext, and custom hooks. I could get into more details about how hooks work on this answer but the documentation does a very good job explaining the state hook and other hooks in detail, hope it helps.

update: Hooks are not longer a proposal, since version 16.8 they're now available to be used, there is a section in React's site that answers some of the FAQ.

这篇关于React 中的 useState() 是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！