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>
  );
}