基础知识
React 核心概念
React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库，采用组件化思想和声明式编程模式。
React 组件
组件是 React 应用的基本构建块，可以是函数组件或类组件。函数组件更简洁，配合 Hooks 可以实现状态管理。
- 函数组件：接收 props 作为参数，返回 JSX
- 类组件：通过继承 React.Component 实现
- 组件应当保持单一职责原则
JSX
JSX 是 JavaScript 的语法扩展，允许在 JS 中编写类似 HTML 的结构。它会被编译为 React.createElement 调用。
Props 与 State
Props 是父组件向子组件传递数据的方式，只读不可修改。State 是组件内部管理的状态，修改会触发重新渲染。
Hooks
- useState：在函数组件中添加状态
- useEffect：处理副作用，如数据获取、订阅等
- Hooks 只能在函数组件顶层调用，不能在循环或条件中调用
虚拟 DOM
React 使用虚拟 DOM 来提高渲染性能。当状态变化时，React 会创建新的虚拟 DOM 树，通过 Diff 算法比较差异，只更新需要变更的真实 DOM 节点。
图文教程
步骤一：函数组件示例
import React from 'react';
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
</div>
);
}
步骤二：useState 使用
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
步骤三：useEffect 使用
import React, { useState, useEffect } from 'react';
function UserInfo({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
}, [userId]);
if (!user) return <div>Loading...</div>;
return <div>{user.name}</div>;
}
代码实操
阅读以下代码，理解实现原理，然后尝试修改并运行
实践任务：自定义 useFetch Hook
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(err => {
if (err.name !== 'AbortError') {
setError(err);
setLoading(false);
}
});
return () => controller.abort();
}, [url]);
return { data, loading, error };
}
练习任务
- 为 useFetch 添加重试机制
- 支持 POST 请求和请求体配置
- 添加缓存功能，避免重复请求相同 URL