React 函数式组件入门: 计数器案例

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default MyComponent;

这段代码展示了一个简单的 React 计数器组件，使用函数式组件和 useState Hook 实现。

以下是代码解析:

1. 导入 useState Hook: import React, { useState } from 'react';

   • useState 用于在函数式组件中添加状态管理。

2. 初始化状态: const [count, setCount] = useState(0);

   • useState(0) 初始化计数器状态为 0，并返回一个包含两个元素的数组：
     • count：当前状态值 (初始值为 0)。
     • setCount：更新状态值的函数。

3. incrementCount 函数:

   • 此函数使用 setCount(count + 1) 更新计数器状态，每次点击按钮时将计数器值加 1。

4. JSX 返回值:

   • 组件返回一个包含以下内容的 div 元素：
     • 显示当前计数器值的段落 (<p>Count: {count}</p>) 。
     • 点击时调用 incrementCount 函数的按钮 (<button onClick={incrementCount}>Increment</button>)。

总结:

这个例子展示了如何使用 useState Hook 在 React 函数式组件中管理状态，实现了一个简单的计数器功能。