React 入门

React 用组件的方式构建界面：把 UI 拆成独立、可复用的小块，每块管理自己的状态和渲染逻辑。

学习目标

理解组件化思想和 JSX 语法
用 Props 在组件间传递数据
用 useState 管理组件状态
用 useEffect 处理副作用（请求数据、定时器等）

组件与 JSX

// 组件就是一个返回 JSX 的函数
function Welcome({ name }) {
  return <h1>你好，{name}！</h1>;
}

// 组合使用
function App() {
  return (
    <main>
      <Welcome name="小明" />
      <Welcome name="小红" />
    </main>
  );
}

JSX 要点：

标签必须闭合，相邻元素要包在一个父元素（或 <>...</>）里
属性用驼峰：className、onClick
{} 里可以写任意 JS 表达式

Props：数据向下流动

function UserCard({ user, onFollow }) {
  return (
    <div className="card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <button onClick={() => onFollow(user.id)}>关注</button>
    </div>
  );
}

Props 是只读的——子组件不能修改传入的 props。数据自上而下流动，事件通过回调函数向上传递。

State：组件的记忆

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 声明状态

  return (
    <button onClick={() => setCount(count + 1)}>
      点了 {count} 次
    </button>
  );
}

状态一变，组件自动重新渲染——这就是 React 的核心：UI = f(state)，你只关心状态长什么样，渲染交给 React。

useEffect：副作用

import { useEffect, useState } from "react";

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []); // 空依赖数组 = 只在首次渲染后执行一次

  if (loading) return <p>加载中…</p>;
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

列表与 key

渲染列表时必须给每项一个稳定唯一的 key（用数据 id，不要用数组下标），否则列表更新时可能出现状态错乱。

动手练习

计数器：加、减、重置三个按钮，步长可切换（1 / 5 / 10）。
待办应用：组件拆成 <TodoInput>、<TodoList>、<TodoItem>，支持增删改、筛选（全部/未完成/已完成）。
用户列表：从 JSONPlaceholder 拉数据，加加载态和错误态。