导入 useState 反应

在 React 中，我们经常需要管理组件的内部状态。为了实现这一目的，我们可以使用 React 提供的 useState 钩子。

导入 useState

使用 useState 钩子需要先导入它。在函数式组件中，可以通过以下方式导入：

import React, { useState } from 'react';

在这里，我们从 react 模块中导入 useState 钩子，并将其解构出来。现在，我们可以在组件中使用它了。

使用 useState

我们可以使用 useState 钩子来创建一个状态变量和一个更新状态的函数。状态变量可以用于跟踪组件的内部状态。更新函数可以用于更新状态变量。

import React, { useState } from 'react';

function Example() {
  // 创建一个名为 'count' 的状态变量，
  // 初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，我们使用 useState 钩子来创建一个名为 count 的状态变量，并将其初始值设置为 0。我们还使用 useState 钩子返回的更新函数 setCount 来更新状态变量 count。

当用户单击按钮时，我们调用 setCount 函数，将 count 的值增加 1。此时，组件会被重新渲染，并显示更新后的 count 值。

总结

通过导入 useState 钩子，我们可以方便地管理函数式组件的内部状态。使用 useState 钩子，我们可以创建一个状态变量和一个更新函数，来跟踪和更新组件的内部状态。