useState是一个钩子，允许您向功能组件添加状态。它接受一个作为状态属性初始值的参数，并返回状态属性的当前值和一个能够更新状态属性的方法。 下面是一个简单的例子:

import React, { useState } from react    

function HookCounter {    
  const [count, setCount]= useState(0)    
    return(    
      <div>     
        <button onClick{( ) => setCount(count+1)}> count{count}</button>    
      </div>    
    )   
 }

useState接受状态变量的初始值，在本例中为零，并返回一对值。状态的当前值被称为count，可以更新状态变量的方法被称为setCount。

useState是React v16.8.0可用的钩子之一。它基本上允许您将非状态/功能组件转换为可以拥有自己状态的组件。

在最基本的层面上，它是这样使用的:

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

这允许您调用setLoading传递一个布尔值。 这是拥有“有状态”功能组件的一种很酷的方式。

让我们用简单的方式很容易地了解我们的用法

假设我们有react代码:-

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

Test.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神奇地工作，

测试。jsx，使用useState

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，它是一个函数，它返回两件事，一个是当前状态值，另一个是函数，如果我们传递任何值给这个函数，它将更新当前状态值，当前状态值更新它的值在所有地方，无论它使用，而无需编写任何额外的代码。

基本上React.useState(0)神奇地看到它应该返回元组计数和setCount(一个改变计数的方法)。参数useState用于设置count的初始值。

  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(0);

  // increments count by 1 when first button clicked
  function handleClick(){
    setCount(count + 1);
  } 

  // increments count2 by 1 when second button clicked
  function handleClick2(){
    setCount2(count2 + 1);
  } 

  return (
    <div>
      <h2>A React counter made with the useState Hook!</h2>
      <p>You clicked {count} times</p>
      <p>You clicked {count2} times</p>
      <button onClick={handleClick}>
        Click me
      </button> 
      <button onClick={handleClick2}>
        Click me2
      </button>
  );

基于Enmanuel Duran的示例，但显示了两个计数器，并将lambda函数作为普通函数编写，因此有些人可能更容易理解。

useState是一个钩子，它允许你在函数组件中使用状态变量。

React中有两种类型的组件:类组件和功能组件。

类组件是扩展自React的ES6类。组件，可以有状态和生命周期方法:

class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
  message: ‘’    
 };
}

componentDidMount() {
/* ... */
 }

render() {
return <div>{this.state.message}</div>;
  }
}

函数式组件是只接受参数作为组件属性并返回有效JSX的函数:

function Message(props) {
  return <div>{props.message}</div>
 }
// Or as an arrow function
const Message = (props) =>  <div>{props.message}</div>

如您所见，没有状态或生命周期方法。

React钩子是一种新的方式(仍在开发中)来访问React的核心功能，如状态，而不必使用类，在你的例子中，如果你想直接在处理程序函数中增加一个计数器，而不直接在onClick道具中指定它，你可以这样做:

...
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函数内部使用它，在那里我们可以做更多的事情;使用钩子的想法是，我们能够使我们的代码更具功能性，并避免在不需要/不需要的情况下使用基于类的组件。

我写了一篇关于钩子的完整文章，其中有多个示例(包括计数器)，比如这个代码依赖，我使用了useState、useEffect、useContext和自定义钩子。我可以更详细地介绍钩子如何在这个答案上工作，但是文档很好地解释了状态钩子和其他钩子的细节。

更新:钩子不再是一个建议，因为16.8版本他们现在可以使用，在React的网站上有一个部分回答了一些常见问题。