前端十年：从0到资深开发者的10堂必修课【第4篇】
前端十年：从0到资深开发者的10堂必修课
第4篇：框架篇——以React为例，从组件化到工程化实践
现代前端开发早已离不开框架。React 作为目前最流行的前端库之一，以其组件化、声明式编程和强大的生态系统，成为无数开发者的首选。本篇将以 React 为主线，带你从零搭建组件、理解核心概念，再到设计模式与工程化实践，让你不仅会写 React，更能写出高质量、可维护的 React 应用。
一、React 基础
React 的核心思想是“组件化”——将 UI 拆分成独立、可复用的片段，每个片段只关心自己的逻辑和渲染。学习 React，首先要掌握 JSX、组件声明方式以及数据流（Props 和 State）。
1. JSX 语法、组件声明、Props 与 State
JSX是 JavaScript 的语法扩展，允许我们在 JavaScript 中书写类似 HTML 的标记。它并不是模板引擎，而是会被 Babel 等工具编译成React.createElement调用。
const element = <h1>Hello, world!</h1>;组件声明有两种方式：函数组件和类组件。
函数组件：一个接收
props并返回 React 元素的普通函数。function Welcome(props) { return <h1>Hello, {props.name}</h1>; }类组件：继承自
React.Component，必须包含render方法。class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
Props是组件接收的只读属性，用于从父组件向子组件传递数据。
State是组件内部管理的可变数据。在类组件中通过this.state定义，并通过this.setState更新；在函数组件中通过useStateHook 管理。
示例：一个简单的计数器
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }2. 生命周期（Class）与 Hooks（useState, useEffect）
类组件的生命周期：分为挂载、更新、卸载三个阶段。常用方法：
componentDidMount：组件挂载后调用，适合发起网络请求、订阅。componentDidUpdate：组件更新后调用，可访问 prevProps/prevState。componentWillUnmount：组件卸载前调用，用于清理（如取消订阅、清除定时器）。
Hooks 的诞生：函数组件原本无法使用 state 和生命周期，Hooks 解决了这个问题。最基础的 Hook 是useState和useEffect。
- useState：返回一个 state 和更新它的函数。
- useEffect：用来处理副作用（side effects），相当于
componentDidMount、componentDidUpdate、componentWillUnmount的组合。
useEffect 用法：
useEffect(() => { // 组件挂载和更新时执行 document.title = `You clicked ${count} times`; // 可选的清理函数，在组件卸载或下一次 effect 执行前调用 return () => { console.log('清理工作'); }; }, [count]); // 依赖数组：仅当 count 变化时才重新执行 effect依赖数组：
- 不传：每次渲染后都执行。
- 空数组
[]：只在挂载时执行，卸载时执行清理。 - 传入特定值：仅当这些值变化时执行。
示例：订阅和取消订阅
useEffect(() => { const subscription = props.source.subscribe(); return () => { subscription.unsubscribe(); }; }, [props.source]);二、组件设计模式
随着应用规模增长，我们需要一些模式来复用组件逻辑、提高代码的可维护性。React 社区沉淀了三种主流模式：高阶组件、Render Props 和自定义 Hooks。
1. 高阶组件（HOC）
高阶组件是一个函数，接收一个组件作为参数，返回一个新组件。它用于横切关注点（如权限控制、日志记录）的复用。
示例：一个用于添加加载提示的 HOC
function withLoading(Component) { return function WithLoading({ isLoading, ...props }) { if (isLoading) { return <div>Loading...</div>; } return <Component {...props} />; }; } // 使用 const UserListWithLoading = withLoading(UserList); <UserListWithLoading isLoading={loading} users={users} />注意：HOC 可能会产生嵌套地狱，且不易推断来源。HOC 应遵循惯例（如传递 props、displayName 等）。
2. Render Props
Render Props 是一种通过函数 prop 在组件间共享代码的技术。组件的 prop 是一个函数，它返回 React 元素，组件内部调用该函数并传入所需数据。
示例：一个追踪鼠标位置的组件
class MouseTracker extends React.Component { constructor(props) { super(props); this.state = { x: 0, y: 0 }; } handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }); }; render() { return ( <div onMouseMove={this.handleMouseMove}> {this.props.render(this.state)} </div> ); } } // 使用 <MouseTracker render={({ x, y }) => ( <p>鼠标位置: ({x}, {y})</p> )} />Render Props 模式非常灵活，但可能导致嵌套过多（“回调地狱”）。现在通常被自定义 Hooks 替代。
3. 自定义 Hooks
自定义 Hooks 是 React Hooks 体系中最强大的复用逻辑方式。它本质是一个函数，名称以use开头，内部可以调用其他 Hooks。
示例：封装鼠标位置逻辑为自定义 Hook
import { useState, useEffect } from 'react'; function useMousePosition() { const [position, setPosition] = useState({ x: 0, y: 0 }); useEffect(() => { const handleMove = (e) => setPosition({ x: e.clientX, y: e.clientY }); window.addEventListener('mousemove', handleMove); return () => window.removeEventListener('mousemove', handleMove); }, []); return position; } // 在组件中使用 function App() { const { x, y } = useMousePosition(); return <p>鼠标位置: ({x}, {y})</p>; }自定义 Hooks 让逻辑复用变得简洁、直观，并且没有额外的嵌套。这也是目前官方推荐的方式。
三、React 工程化
在实际项目中，我们不仅需要编写组件，还需要配置构建工具、集成 UI 库、管理路由和状态等。工程化能力是区分初级和高级开发者的重要标志。
1. Create React App 与 Vite 初始化
Create React App（CRA）是官方脚手架，零配置即可创建一个 React 项目。它内置了 Webpack、Babel、ESLint 等，适合快速启动项目。
npx create-react-app my-appcdmy-appnpmstartVite是一个新兴的构建工具，利用原生 ES 模块，开发服务器启动极快，热更新也迅速。Vite 同样支持 React 项目。
npmcreate vite@latest my-app ----templatereactcdmy-appnpminstallnpmrun dev对比：CRA 配置丰富但相对较重，Vite 轻量快速，但生态（如插件）可能稍弱。两者都可满足大部分项目需求。
2. 组件库集成（Ant Design）
实际开发中，我们常使用成熟的组件库来提升效率。Ant Design 是 React 生态中最流行的 UI 库之一。
安装与使用：
npminstallantd在入口文件引入样式：
import 'antd/dist/reset.css';在组件中使用：
import { Button, DatePicker } from 'antd'; function App() { return ( <div> <Button type="primary">Primary Button</Button> <DatePicker /> </div> ); }按需加载：为了减小打包体积，可以配置按需加载。使用 Vite 时，安装vite-plugin-imp或直接使用 antd 的 ES 模块版本（已支持 tree shaking）。使用 CRA 时，可借助babel-plugin-import或使用craco覆盖配置。
主题定制：Ant Design 支持通过 Less 变量定制主题。在 Vite 中配置 less 并修改变量即可。
工程化还包括路由管理（React Router）、状态管理（Redux/Zustand，将在下一篇详述）、代码规范（ESLint/Prettier）、测试等。这些后续篇章会逐一深入。
总结
本篇以 React 为主线，系统学习了：
- React 基础：JSX、组件声明、Props 与 State，以及生命周期与 Hooks 的对应关系。
- 组件设计模式：高阶组件、Render Props、自定义 Hooks 三种逻辑复用方式，其中自定义 Hooks 已成为主流。
- React 工程化：使用 CRA 或 Vite 快速创建项目，并集成 Ant Design 组件库，为实际开发铺平道路。
掌握了这些，你已经具备了独立开发 React 应用的能力。下一篇我们将进入状态篇，深入探讨前端状态管理与路由设计，敬请期待！
思考题：
- 为什么 React 推崇不可变数据？
setState为什么是异步的？ - 自定义 Hooks 相比 HOC 和 Render Props 有哪些优势？
- 在使用 useEffect 时，如何避免无限循环？
- 你更喜欢 CRA 还是 Vite？为什么？在实际项目中遇到过哪些工程化问题？
欢迎在评论区分享你的见解和疑问，一起讨论进步！