React 学习 Day1：基础语法与整体框架（含 JS 关键基础）

2.1 什么是组件#

• React 应用由组件树组成：小组件组合成大组件，最终拼成页面。
• 组件负责一小块 UI + 相关逻辑，具有高复用性与可维护性。

函数组件（现代主流）：

1
function Hello({ name }) {
2
  return <h1>Hello {name}</h1>;
3
}

组件组合（Composition）：

1
function App() {
2
  return (
3
    <div>
4
      <Hello name="Tom" />
5
      <Hello name="Jerry" />
6
    </div>
7
  );
8
}

2.2 函数组件 vs 类组件（只要知道差异）#

• 函数组件：更简洁，配合 Hooks 写法统一，是现在 React 的标准。
• 类组件：历史遗留写法，需要 this，生命周期冗长，新项目基本不再推荐。

你现在只需要专注函数组件 + Hooks。

3.1 虚拟 DOM（Virtual DOM）与 Diff#

为什么需要 Virtual DOM：

• 真实 DOM 操作成本高。
• React 先在内存里构建虚拟 DOM（JS 对象树），再与旧树比较（diff），只把最小改动同步到真实 DOM。

更新流程：

1. State/Props 变化
2. 组件重新执行 → 生成新的 Virtual DOM
3. React diff 旧树和新树
4. 只更新需要变化的真实 DOM

与列表渲染强相关的点：

• map 渲染列表时要加 key，否则 diff 难以稳定复用节点。

1
items.map(item => <li key={item.id}>{item.title}</li>)

key 要稳定且唯一，尽量不用 index 作为 key（数据会增删/重排时会出 bug）。

3.2 Props 与 State#

Props（外部传入）

• 父组件 → 子组件的只读数据。
• 子组件不能直接修改 props，只能通过回调通知父组件。

State（组件内部）

• 组件自己维护的可变数据，变化会触发重渲染。
• 使用 useState 等 Hook 管理。

单向数据流（React 的基本原则）：

• 数据自顶向下传递（parent → child）。
• 子组件想影响父组件：通过 props 传函数（回调），由父组件更新自己的 state。

状态提升（Lifting State Up）：

• 当多个组件需要共享同一份数据，把 state 放到它们最近的共同父组件中。

3.3 Hooks（函数组件的“外挂能力”）#

常用三件套：

• useState：组件状态
• useEffect：副作用（请求/订阅/手动 DOM 操作）
• useContext：跨组件共享数据

Hooks 两条硬规则：

1. 只能在函数组件或自定义 Hook 顶层调用（不能写在 if/for/函数里）。
2. 不能在普通 JS 函数里调用。

5.1 路由（React Router）#

用于 SPA 的页面切换：

1
import { BrowserRouter, Routes, Route } from "react-router-dom";

核心概念：

• BrowserRouter：路由容器
• Routes/Route：路由表
• Link：无刷新跳转

5.2 全局状态管理（Redux / Zustand）#

什么时候需要全局状态：

• 多个无关组件都要用/改同一份数据（例如用户信息、主题、购物车）。

对比：

• Redux：强规范、生态大，但模板代码多。
• Zustand：轻量直观，新手上手更快。

5.3 UI 组件库 / 样式方案#

• Ant Design / Material UI / Chakra UI：现成高质量组件，提高开发效率。
• Tailwind CSS：原子化/工具类 CSS，快速拼 UI。

7.1 let / const / var#

• const：默认使用，引用不可重新指向。
• let：需要重新赋值时用。
• var：不要用（函数作用域、变量提升问题）。

7.2 常用数据类型#

• 字符串、数字、布尔值
• 数组：[1, 2, 3]
• 对象：{ name: "Tom", age: 20 }

重点：数组/对象是引用类型，更新时要注意“不可变性”。

7.3 函数与箭头函数#

React 中大量使用箭头函数：

1
const add = (a, b) => a + b;

特点：

• 写法短
• this 绑定更直观（函数内 this 取外层）

7.4 条件与 JSX 条件渲染#

JS：

1
if (x > 0) console.log("ok");

JSX 常用：

1
{isLogin ? <User /> : <Login />}
2
{list.length > 0 && <List />}

7.5 map（列表渲染核心）#

map：把数组映射成新数组，不改变原数组。

1
const nums = [1, 2, 3];
2
const squares = nums.map(n => n * n); // [1,4,9]

React 列表渲染：

1
<ul>
2
  {names.map(name => (
3
    <li key={name}>{name}</li>
4
  ))}
5
</ul>

7.6 解构（Destructuring）#

对象解构：

1
const user = { name: "Tom", age: 20 };
2
const { name, age } = user;

数组解构：

1
const nums = [1, 2, 3];
2
const [a, b] = nums; // a=1, b=2

React 里 useState 就是数组解构：

1
const [count, setCount] = useState(0);

7.7 展开运算符（…）与不可变更新#

数组更新：

1
const arr2 = [...arr1, newItem];

对象更新：

1
const newUser = { ...user, age: 21 };

原因：React 依赖“引用变化”判断更新，因此要返回新对象/新数组。

7.8 模块化 import / export#

命名导出（named export）：

1
export function add(a, b) { return a + b; }
2
// 使用
3
import { add } from "./utils";

默认导出（default export）：

1
export default function App() {}
2
// 使用
3
import App from "./App";

export 的使用场景：

• 让其他文件/组件能复用你写的函数、组件、常量、Hook 等。

7.9 Promise 与 async/await#

Promise 写法：

1
fetch(url).then(r => r.json()).then(data => setList(data));

async/await 写法：

1
async function getData() {
2
  const r = await fetch(url);
3
  const data = await r.json();
4
  setList(data);
5
}

React 中常在 useEffect 里请求数据，并用 try/catch 做错误处理。

8.1 Counter 例子为什么这样写#

1
const [count, setCount] = useState(0);

useState 返回 [当前值, 更新函数]，用数组解构取出：

• count：当前值
• setCount：更新值并触发重渲染

点击按钮执行：

1
onClick={() => setCount(count + 1)}

→ 更新 state → React 自动重渲染 → UI 变动。

8.2 map 的本质#

• 对每个元素执行回调函数
• 返回新数组
• 在 React 中用于“数组 → 组件列表”的转换

8.3 数组解构例子#

1
const nums = [1, 2, 3];
2
const [a, b] = nums;

等价于：

1
const a = nums[0]; // 1
2
const b = nums[1]; // 2

8.4 export 给谁用#

你写的内容需要跨文件复用时导出：

• 组件
• 工具函数
• 常量/配置
• API 封装
• 自定义 Hook