React组件状态管理示例及技术解答

本示例演示了在React中使用useState来管理组件状态的方法，并提供了一些常见的技术解答。

import React, { useState } from 'react';

const Counter = () => {
  // 使用useState定义状态变量count及其更新函数setCount，初始值为0
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    // 更新count的值，加1
    setCount(count + 1);
  };

  const handleDecrement = () => {
    // 更新count的值，减1
    setCount(count - 1);
  };

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={handleIncrement}>增加</button>
      <button onClick={handleDecrement}>减少</button>
    </div>
  );
};

// 在父组件或页面中使用<Counter />即可渲染计数器组件

// 代码解释：
// - 使用useState来声明一个名为count的状态变量，并初始化为0。
// - 两个按钮分别触发handleIncrement和handleDecrement函数，通过setCount更新count的值。

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com