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

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

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>

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

谢谢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})}/> )

useState()是一个内置React钩子的例子，它允许你在函数组件中使用状态。这在React 16.7之前是不可能的。

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

useState钩子的语法很简单。

const [value, setValue] = useState(defaultValue)

如果您不熟悉这个语法，请到这里。

我建议您阅读文档。有很好的解释和大量的例子。

import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // its up to you how you do it const buttonClickHandler = e => { // increment // setCount(count + 1) // decrement // setCount(count -1) // anything // setCount(0) } return ( <div> <p>You clicked {count} times</p> <button onClick={buttonClickHandler}> Click me </button> </div> ); }

上面提供的答案很好，但让我插一句，useState是异步的，所以如果你的下一个状态依赖于你的前一个状态，你最好给useState一个回调。请看下面的例子:

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      // passing a callback to useState to update count
      <button onClick={() => setCount(count => count + 1)}>
        Click me
      </button>
    </div>
  );
}

如果您的新状态依赖于旧状态的计算，这是推荐的方法。