异常教程
react 教程（超详细）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
前言：为什么选择 React 教程？
在 Web 开发领域，React 是一个不可或缺的框架。它由 Facebook 开发并维护，凭借其高效性、组件化设计和强大的生态系统，成为构建复杂单页应用（SPA）的首选工具。无论是初学者还是中级开发者，掌握 React 都能显著提升开发效率，并为未来学习其他前端技术打下坚实基础。本教程将通过循序渐进的方式，结合实际案例，带您从基础概念到高级应用全面掌握 React。
一、React 的核心概念
1.1 JSX：JavaScript 的语法扩展
JSX 是 React 的核心语法之一，它允许在 JavaScript 中直接编写类似 HTML 的标签。例如：
function Welcome() {
return <h1>Hello, React!</h1>;
}
比喻：JSX 就像乐高积木，通过组合不同的“积木块”（组件），可以快速搭建复杂的界面。
1.2 组件化开发：构建可复用的模块
React 的核心思想是通过组件组织代码。组件可以是函数或类，例如：
// 函数组件
function Button({ text }) {
return <button>{text}</button>;
}
// 类组件
class Counter extends React.Component {
render() {
return <div>Count: {this.props.count}</div>;
}
}
优势：组件化让代码更易维护，且能复用到不同项目中。
1.3 虚拟 DOM：提升性能的秘密武器
React 使用虚拟 DOM（Virtual DOM）来优化渲染过程。当数据变化时，React 会先更新虚拟 DOM，再通过差异算法比较新旧 DOM，只更新实际变化的部分。
比喻：虚拟 DOM 像是“草稿纸”，它先记录所有可能的修改，再找出最高效的修改方式，避免直接操作真实 DOM 带来的性能损耗。
二、从零开始构建第一个 React 应用
2.1 环境搭建
使用 create-react-app 脚手架快速初始化项目：
npx create-react-app my-app
cd my-app
npm start
2.2 函数组件与 Props 传递
通过 Props（属性）可以在组件间传递数据：
// 父组件
function Parent() {
return <Child message="Hello from Parent" />;
}
// 子组件
function Child({ message }) {
return <p>{message}</p>;
}
Props 的作用：如同快递包裹，将数据从父组件“邮寄”到子组件。
2.3 状态管理：useState 钩子
使用 useState 管理组件内部状态：
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
状态的意义：状态是组件的“记忆”，它记录当前数据并触发界面更新。
三、进阶：组件生命周期与事件处理
3.1 组件生命周期（以类组件为例）
类组件有三个阶段：
- 挂载：
constructor→componentDidMount - 更新：
componentDidUpdate - 卸载：
componentWillUnmount
class LifecycleDemo extends React.Component {
constructor() {
super();
console.log("Constructor");
}
componentDidMount() {
console.log("Component Did Mount");
}
render() {
return <div>Lifecycle Demo</div>;
}
}
3.2 事件处理与表单控制
通过 onChange 监听输入框变化：
function FormExample() {
const [inputValue, setInputValue] = React.useState("");
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<p>您输入的内容：{inputValue}</p>
</div>
);
}
受控组件：将表单值与 React 状态绑定，确保数据由组件完全控制。
四、高级特性：Hooks 与 Context API
4.1 useEffect：替代类组件的副作用
useEffect 可以替代 componentDidMount、componentDidUpdate 和 componentWillUnmount：
function NetworkData() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
// 模拟网络请求
setTimeout(() => setData("Data Loaded!"), 1000);
// 返回清理函数
return () => {
console.log("Cleanup before unmount");
};
}, []); // 空数组表示只在挂载时执行
return <div>{data}</div>;
}
4.2 Context API：全局状态共享
通过 Context 实现跨组件数据传递：
// 创建 Context
const ThemeContext = React.createContext();
// 提供者组件
function App() {
const [theme, setTheme] = React.useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<ChildComponent />
</ThemeContext.Provider>
);
}
// 子组件消费 Context
function ChildComponent() {
const { theme } = React.useContext(ThemeContext);
return <div style={{ backgroundColor: theme }} />;
}
五、最佳实践与性能优化
5.1 组件拆分原则
将大组件拆分为小的、单一功能的组件。例如，一个博客页面可以拆分为：
PostList（展示文章列表）PostItem（单篇文章项）CommentSection（评论区域）
5.2 性能优化技巧
- Memoization：使用
React.memo避免不必要的渲染：const MemoizedComponent = React.memo(MyComponent); - 代码分割：通过
React.lazy实现动态导入：const LazyComponent = React.lazy(() => import("./LazyComponent"));
结论：迈向专业级 React 开发
通过本教程，您已掌握了 React 的核心概念、组件化开发模式、状态管理以及高级特性。从简单的“Hello World”到复杂的上下文共享，React 的灵活性和扩展性使其成为现代 Web 开发的基石。
下一步建议：
- 阅读官方文档，深入理解 Hooks 的全部功能。
- 尝试使用 React Router 实现多页面路由。
- 结合 Redux 或 MobX 学习复杂状态管理。
React 的学习之路永无止境，但只要循序渐进、勤于实践，您一定能成为高效、优雅的 React 开发者！