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

基本上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函数作为普通函数编写，因此有些人可能更容易理解。

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

假设我们有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是0.16.7版本中内置的react钩子之一。

useState应该只在功能组件中使用。如果我们需要一个内部状态，并且不需要实现更复杂的逻辑(如生命周期方法)，则使用useState。

const [state, setState] = useState(initialState);

返回一个有状态值和一个更新它的函数。 在初始呈现期间，返回的状态(state)与 作为第一个参数传递的值(initialState)。 setState函数用于更新状态。它接受一个新的 状态值，并将组件的重新呈现纳入队列。

请注意用于更新状态的useState钩子回调与this.setState组件的行为不同。为了说明两者的区别，我准备了两个例子。

class UserInfoClass extends React.Component { state = { firstName: 'John', lastName: 'Doe' }; render() { return <div> <p>userInfo: {JSON.stringify(this.state)}</p> <button onClick={() => this.setState({ firstName: 'Jason' })}>Update name to Jason</button> </div>; } } // Please note that new object is created when setUserInfo callback is used function UserInfoFunction() { const [userInfo, setUserInfo] = React.useState({ firstName: 'John', lastName: 'Doe', }); return ( <div> <p>userInfo: {JSON.stringify(userInfo)}</p> <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button> </div> ); } ReactDOM.render( <div> <UserInfoClass /> <UserInfoFunction /> </div> , document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

使用setUserInfo回调时创建新对象。注意我们丢失了lastName键值。修正了我们可以在useState内部传递函数。

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

看到的例子:

// Please note that new object is created when setUserInfo callback is used function UserInfoFunction() { const [userInfo, setUserInfo] = React.useState({ firstName: 'John', lastName: 'Doe', }); return ( <div> <p>userInfo: {JSON.stringify(userInfo)}</p> <button onClick={() => setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' }))}> Update name to Jason </button> </div> ); } ReactDOM.render( <UserInfoFunction /> , document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

与类组件中的setState方法不同，useState可以 不自动合并更新对象。你可以复制这个 通过结合函数更新程序表单和对象扩展来实现 语法: setState(prevState => { / /对象。Assign也可以 返回{…prevState…updatedValues}; })；

有关我们的更多信息，请参阅官方文档。

上面提供的答案很好，但让我插一句，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>
  );
}

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

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。