使用 useState 实现计数器 - JavaScript

在 React 中，我们可以使用 useState 这个 hook 来实现状态管理。这个 hook 必须在函数组件的顶层使用，用来定义状态和更新状态的方法。

如何使用 useState 实现计数器

我们可以创建一个状态变量 count，并将其初始化为 0。然后通过 setCount 函数来更新 count 的值。

import React, { useState } from 'react';

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

  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);

  return (
    <div>
      <h2>Counter</h2>
      <div>
        <button onClick={handleDecrement}>-</button>
        <span>{count}</span>
        <button onClick={handleIncrement}>+</button>
      </div>
    </div>
  );
}

export default Counter;

在上面的代码中，我们首先使用 useState 创建了一个名为 count 的状态变量，并将其初始化为 0。然后我们定义了两个事件处理程序 handleIncrement 和 handleDecrement 来分别处理增加和减少计数器的操作。当按钮被点击时，我们通过调用 setCount 来更新 count 的值，并使其重新渲染。最后我们将计数器的值显示在页面上。

效果演示

在线演示

总结

useState 是 React 中实现状态管理的最常用方法之一。它使我们能够创建状态变量并在它们发生变化时重新渲染组件。如果你想要在你的 React 组件中使用状态，useState 是一个非常方便、易于使用的 hook。