函数式组件：

App.jsx:

import { useEffect, useState } from 'react'
import './App.css'

export default function App() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.title = 'React 函数组件入门'
  }, [])

  return (
    <div className="app">
      <h1>函数组件入门：计数器</h1>
      <p className="hint">
        状态在 <code>useState</code>，点击按钮通过 <code>setCount</code>{' '}
        更新界面。
      </p>
      <p className="count">
        当前计数：<strong>{count}</strong>
      </p>
      <div className="actions">
        <button type="button" onClick={() => setCount((c) => c - 1)}>
          −1
        </button>
        <button type="button" onClick={() => setCount((c) => c + 1)}>
          +1
        </button>
      </div>
    </div>
  )
}

相关知识点总结：

组件定义：通过 function 定义函数组件，配合默认导出使用

状态管理：useState 定义响应式状态，提供修改方法驱动视图更新

副作用处理：useEffect 挂载时执行一次性操作（如修改网页标题）

页面渲染：基于 JSX 编写结构，通过 {} 绑定展示数据

交互事件：onClick 绑定点击事件，触发状态修改

核心特性：状态驱动视图，状态改变自动刷新界面

样式使用：import 引入 CSS 文件为组件添加样式