React中的useState()是什么?

JavaScript

阿飞古一A

2020-03-12

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

第1177篇《React中的useState()是什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
ProItachi 2020.03.12

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,我利用了useStateuseEffectuseContext,和自定义挂钩我可以深入了解有关钩子如何工作的详细信息,但是文档在解释状态钩子和其他钩子方面做得很好,希望对您有所帮助。

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

前端Eva 2020.03.12

谢谢loelsonk,我这样做了

const [dataAction, setDataAction] = useState({name: '', description: ''});

    const _handleChangeName = (data) => {
        if(data.name)
            setDataAction( prevState  => ({ ...prevState,   name : data.name }));
        if(data.description)
            setDataAction( prevState  => ({ ...prevState,   description : data.description }));
    };
    
    ....return (
    
          <input onChange={(event) => _handleChangeName({name: event.target.value})}/>
          <input onChange={(event) => _handleChangeName({description: event.target.value})}/>
    )

西里猴子 2020.03.12

useState是React v16.8.0中可用的钩子之一。基本上,它使您可以将原本没有状态/功能的组件变成可以拥有自己状态的组件。

在最基本的级别上,它是通过以下方式使用的:

const [isLoading, setLoading] = useState(true);

然后,这使您可以调用setLoading传递布尔值。这是拥有“有状态”功能组件的一种很酷的方法。

古一GO 2020.03.12

useState()是内置的React挂钩示例,可让您在功能组件中使用状态。在React 16.7之前这是不可能的。

useState函数是一个内置的挂钩,可以从react包中导入。它允许您向功能组件添加状态。使用功能组件内部的useState挂钩,您可以创建一条状态,而无需切换到类组件。

古一老丝宝儿 2020.03.12

挂钩是React v16.7.0-alpha useState“挂钩” 中的一个新功能useState()设置any变量的默认值并在函数组件(PureComponent函数)中进行管理。 ex : const [count, setCount] = useState(0);设置计数0的默认值。并且u可以使用setCountto incrementdecrement该值。onClick={() => setCount(count + 1)}增加计数值。DOC

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android