更新界面

你可能经常需要组件“记住”一些信息并将其展示出来。比如，如果你想计算按钮被点击的次数的话，你需要为组件添加状态 (state)。

首先，从 React 中导入 useState：

import { useState } from 'react';

现在，你可以在组件中声明一个“状态变量”：

function MyButton() {
  const [count, setCount] = useState(0);
  // ...

你将从 useState 中获得两样东西：当前状态（count）和用于更新它的函数（setCount）。你可以给它们任何名称，但约定俗成的习惯是写成 [something, setSomething]。

按钮第一次显示时，count 是 0，因为你将 0 传递给了 useState()。当你想要更改状态时，可调用 setCount() 并将新值传递给它。

点击此按钮将增加计数器：

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

React 将再次调用你的组件函数。这一次，count 将变为 1。然后将变为 2。以此类推。

如果多次渲染该组件，每个都将有自己的状态。

分别点击每个按钮：

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

注意每个按钮都“记住”了自己的计数状态，不会影响其他按钮。