React 核心概念

理解组件、Props、State 和 Hooks

理解 React 组件化思想
掌握 Props 和 State
理解 useState 和 useEffect
了解组件生命周期

React 是什么？

React 是 Meta（Facebook）开源的前端框架，核心是组件化——把界面拆成独立、可复用的组件，像搭乐高积木一样拼出完整页面。

React 组件就是一个返回 JSX 的 JavaScript 函数。

JavaScript

// 一个最简单的 React 组件
function Welcome({ name }) {
  return <h1>你好，{name}！</h1>;
}

// 使用组件
<Welcome name="小明" />
<Welcome name="小红" />

💡JSX 是什么？

JSX 是 JavaScript 的语法扩展，能在 JS 里写类似 HTML 的代码。<div>{变量}</div> 里的花括号中，可以放任何 JS 表达式。Babel/SWC 会把 JSX 编译成普通的 JS 函数调用。

Props：组件的输入

Props 是父组件传给子组件的数据，只读的。就像 Python 函数的参数。

JavaScript

function UserCard({ name, role, avatar }) {
  return (
    <div className="card">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <span>{role}</span>
    </div>
  );
}

// 使用
<UserCard name="小明" role="前端工程师" avatar="/me.png" />

State：组件的记忆

State 是组件内部可以变化的数据。State 改变时，React 自动重新渲染界面。这是 React 最核心的机制。

JavaScript

import { useState } from "react";

function Counter() {
  // useState 返回 [当前值, 修改函数]
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前数字：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
}

🐍不可变性原则

React 要求 State 不可直接修改，必须用 set 函数传入新值。React 是通过引用比较判断要不要重新渲染的，直接改原对象的话，引用没变，React 就感知不到数据变了。这和 Python 里元组不可变、每次修改都生成新对象的思路是一样的。

useEffect：副作用

useEffect 处理组件渲染后的副作用：数据获取、订阅、DOM 操作。类似组件的「生命周期」。

JavaScript

import { useState, useEffect } from "react";

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

  // 组件挂载后获取数据
  useEffect(() => {
    fetch("/api/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>;
}

填空题填写空白处的代码

React 中声明状态用钩子，修改状态用 set 函数。

选择题

React 里父组件传给子组件，而且子组件只能读的数据叫 props。

资深工程师加餐

底层原理 · 大厂视角 · 工程经验，点卡片展开

穿透是反复查「根本不存在」的数据，用布隆过滤器或缓存空值挡；击穿是某个热点 key 过期瞬间大量请求压向数据库，用互斥重建或逻辑过期；雪崩是大批 key 同时过期，给 TTL 加随机抖动。缓存与库的一致性常用「先更新数据库、再删除缓存」，并靠重试/订阅补偿。

挑战任务

组件就是 Props 到界面的纯函数

简单+50 XP

React 组件可以理解成「输入 props、输出界面」的纯函数。请实现 Greeting(props)：props 是包含 name 的字典，返回问候语 '你好，{name}！'；当 name 缺失时用 '同学' 兜底。

组件就是 Props 到界面的纯函数

Python 0%

1 个测试用例

课后作业

Todo 列表组件

中等+30 XP

就写个 React 的 TodoList 组件。功能就三个：输入框加任务，列表显示任务，点一下删任务。

Todo 列表组件

Python 0%

1 个测试用例