异常教程
react教程（长文讲解）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
- 《从零手撸：仿小红书（微服务架构）》 已完结，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观
前言
在现代 Web 开发中，React 作为 Facebook 开发的 JavaScript 库，凭借其高效、灵活和组件化的特点，成为前端开发的主流选择。无论是构建小型单页应用，还是大型企业级系统，React 的简洁语法和强大的生态支持都能满足开发者的需求。对于编程初学者和中级开发者而言，掌握 React 的核心概念与实践技巧，是迈向专业前端开发的重要一步。本文将以 “React 教程” 为主题，通过循序渐进的方式讲解 React 的核心知识点，并结合实际案例帮助读者理解与应用。
什么是 React？
核心概念解析
React 是一个用于构建用户界面（UI）的 JavaScript 库，它通过声明式编程和组件化架构，帮助开发者高效管理复杂应用的状态与渲染逻辑。其核心思想可以概括为以下两点：
- 声明式编程：开发者只需描述 UI 应该“看起来像什么”，React 会自动优化并更新视图。
- 组件化架构：将 UI 分解为独立、可复用的组件，每个组件负责渲染自身内容并管理自身状态。
虚拟 DOM 的比喻
React 的另一个关键特性是 虚拟 DOM（Virtual DOM）。可以将其想象为一个“影子副本”：当数据状态变化时，React 会先在虚拟 DOM 中计算差异（Diffing），再将最小化的变更同步到真实 DOM，从而减少直接操作 DOM 的性能损耗。这就像快递员在送货前先规划最优路线，而非每次都走最远的路径一样高效。
环境搭建与基础语法
快速启动项目
使用 create-react-app 脚手架工具，开发者可以一键创建 React 项目：
npx create-react-app my-react-app
cd my-react-app
npm start
运行后，浏览器会自动打开默认的欢迎界面，此时你已经拥有了一个可运行的 React 环境。
第一个 React 组件
React 组件可以是函数或类的形式。以下是一个简单的函数组件示例：
function HelloWorld() {
return <h1>Hello, React 教程!</h1>;
}
而类组件则需要继承 React.Component 并实现 render() 方法：
class HelloWorld extends React.Component {
render() {
return <h1>Hello, React 教程!</h1>;
}
}
函数组件（Functional Component）是 React 推荐的现代写法，因其简洁且易于与 hooks 配合使用。
组件化开发：构建可复用的 UI 块
函数组件 vs. 类组件
以下是两种组件形式的对比表格：
| 特性 | 函数组件（Functional Component） | 类组件（Class Component） |
|---|---|---|
| 状态管理 | 使用 useState 钩子 | 通过 this.state 和 setState |
| 生命周期方法 | 通过 useEffect 钩子 | 直接定义 componentDidMount 等 |
| 可读性 | 更简洁，适合现代 React 开发 | 语法冗长，适合复杂逻辑场景 |
组件通信：Props 与 State
- Props（属性）：父组件通过
props向子组件传递数据。例如：// 父组件 function Parent() { return <Child message="Hello from Parent" />; } // 子组件 function Child(props) { return <p>{props.message}</p>; } - State（状态）：组件内部的状态需通过
useState管理。例如：function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
状态管理与数据流
状态提升（Lifting State Up）
当多个组件需要共享状态时，可将状态提升到它们的共同父组件中。例如，一个待办事项列表的增删操作：
function TodoList() {
const [todos, setTodos] = useState([]);
const addTodo = (text) => {
setTodos([...todos, { text }]);
};
const removeTodo = (index) => {
setTodos(todos.filter((_, i) => i !== index));
};
return (
<div>
<TodoInput onAdd={addTodo} />
<TodoItems items={todos} onRemove={removeTodo} />
</div>
);
}
父组件 TodoList 管理 todos 状态，子组件通过 props 接收数据和回调函数。
状态与副作用的管理
useState：管理组件的本地状态。useEffect：处理副作用（如数据获取、订阅事件），类似类组件的componentDidMount和componentDidUpdate。例如：useEffect(() => { // 执行异步请求或订阅 return () => { // 清理操作（如取消订阅） }; }, [dependency]); // 依赖数组决定何时执行
生命周期方法（类组件）
组件的“出生、成长、死亡”
对于类组件，React 提供了生命周期方法来控制组件的不同阶段：
- 挂载阶段：
constructor()：初始化状态。componentDidMount()：组件挂载后执行，适合发起数据请求。
- 更新阶段：
componentDidUpdate()：组件更新后触发，需注意避免无限循环。
- 卸载阶段：
componentWillUnmount()：清理资源（如清除定时器或取消网络请求）。
生命周期的比喻
想象一个“人的一生”：
- 出生（挂载）→ 成长（更新）→ 死亡（卸载）。
React 的生命周期方法如同人生的不同阶段，开发者可以在此阶段执行特定操作。
进阶技巧与实战案例
性能优化：React.memo 与片段（Fragments）
React.memo：防止不必要的组件重渲染。适用于纯展示型组件：const PureComponent = React.memo(({ data }) => <div>{data}</div>);- 片段
<></>：包裹多个子元素而无需添加额外 DOM 节点：function App() { return ( <> <h1>Title</h1> <p>Content</p> </> ); }
实战：构建一个待办事项应用
以下是一个完整的待办事项应用代码示例：
import { useState } from "react";
function TodoApp() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState("");
const handleAdd = () => {
if (input.trim()) {
setTodos([...todos, { text: input, completed: false }]);
setInput("");
}
};
return (
<div>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="输入待办事项"
/>
<button onClick={handleAdd}>添加</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>
<input
type="checkbox"
checked={todo.completed}
onChange={() => {
const newTodos = [...todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
}}
/>
<span style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
{todo.text}
</span>
</li>
))}
</ul>
</div>
);
}
export default TodoApp;
该示例展示了如何通过状态管理实现增删改查功能，以及如何通过 CSS 样式动态更新任务状态。
结论
通过本文的 “React 教程”，我们系统地学习了 React 的核心概念、组件化开发、状态管理以及实战案例。从环境搭建到高级技巧，React 的灵活性和高效性使其成为构建现代 Web 应用的理想选择。对于初学者，建议从基础语法开始，逐步实践并理解组件化思维；中级开发者则可深入探索 hooks、性能优化和大型项目架构。
掌握 React 不仅需要理论学习，更需通过实际项目积累经验。建议读者尝试重构现有项目或开发新功能，例如结合 React Router 实现路由跳转，或使用 Redux 管理复杂状态。记住，持续实践与社区交流是提升技能的关键！
“React 教程” 的学习是一个循序渐进的过程，保持耐心，你的努力终将转化为卓越的开发能力。