https://pothos.dpdns.org/tags/%E7%BB%84%E4%BB%B6%E5%8C%96/Recent content in 组件化 on Ralph's BlogHugo -- 0.147.7zh-cnThu, 25 Dec 2025 00:00:00 +0000https://pothos.dpdns.org/posts/16.react/Thu, 25 Dec 2025 00:00:00 +0000https://pothos.dpdns.org/posts/16.react/<h1 id="react-技术完整指南">React 技术完整指南</h1> <h2 id="目录">目录</h2> <details> <summary>点击展开目录</summary> <ul> <li><a href="#react-%E6%8A%80%E6%9C%AF%E5%AE%8C%E6%95%B4%E6%8C%87%E5%8D%97">React 技术完整指南</a> <ul> <li><a href="#%E7%9B%AE%E5%BD%95">目录</a></li> <li><a href="#1-react-%E6%A6%82%E8%BF%B0%E4%B8%8E%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5">1. React 概述与核心概念</a> <ul> <li><a href="#11-react-%E7%AE%80%E4%BB%8B">1.1 React 简介</a> <ul> <li><a href="#111-react-%E7%89%B9%E7%82%B9%E4%B8%8E%E4%BC%98%E5%8A%BF">1.1.1 React 特点与优势</a></li> <li><a href="#112-react-%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F">1.1.2 React 生态系统</a></li> </ul> </li> <li><a href="#12-%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5">1.2 核心概念</a> <ul> <li><a href="#121-%E8%99%9A%E6%8B%9Fdom%E5%8E%9F%E7%90%86">1.2.1 虚拟DOM原理</a></li> <li><a href="#122-%E7%BB%84%E4%BB%B6%E5%8C%96%E6%80%9D%E6%83%B3">1.2.2 组件化思想</a></li> <li><a href="#123-%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81">1.2.3 单向数据流</a></li> </ul> </li> <li><a href="#13-react-%E6%9E%B6%E6%9E%84%E6%BC%94%E8%BF%9B">1.3 React 架构演进</a> <ul> <li><a href="#131-%E4%BB%8E%E7%B1%BB%E7%BB%84%E4%BB%B6%E5%88%B0%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6">1.3.1 从类组件到函数组件</a></li> <li><a href="#132-fiber-%E6%9E%B6%E6%9E%84%E5%8E%9F%E7%90%86">1.3.2 Fiber 架构原理</a></li> </ul> </li> </ul> </li> <li><a href="#2-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E4%B8%8E%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F">2. 组件基础与生命周期</a> <ul> <li><a href="#21-%E7%BB%84%E4%BB%B6%E5%AE%9A%E4%B9%89%E4%B8%8E%E4%BD%BF%E7%94%A8">2.1 组件定义与使用</a> <ul> <li><a href="#211-%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6">2.1.1 函数组件</a></li> <li><a href="#212-%E7%B1%BB%E7%BB%84%E4%BB%B6">2.1.2 类组件</a></li> <li><a href="#213-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1">2.1.3 组件通信</a></li> </ul> </li> <li><a href="#22-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E8%AF%A6%E8%A7%A3">2.2 生命周期详解</a> <ul> <li><a href="#221-%E6%8C%82%E8%BD%BD%E9%98%B6%E6%AE%B5">2.2.1 挂载阶段</a></li> <li><a href="#222-%E6%9B%B4%E6%96%B0%E9%98%B6%E6%AE%B5">2.2.2 更新阶段</a></li> <li><a href="#223-%E5%8D%B8%E8%BD%BD%E9%98%B6%E6%AE%B5">2.2.3 卸载阶段</a></li> </ul> </li> <li><a href="#23-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%9C%BA%E5%88%B6">2.3 事件处理机制</a> <ul> <li><a href="#231-%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6%E7%B3%BB%E7%BB%9F">2.3.1 合成事件系统</a></li> <li><a href="#232-%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98%E6%9C%BA%E5%88%B6">2.3.2 事件委托机制</a></li> </ul> </li> </ul> </li> <li><a href="#3-react-hooks-%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90">3. React Hooks 深度解析</a> <ul> <li><a href="#31-%E5%9F%BA%E7%A1%80hooks">3.1 基础Hooks</a> <ul> <li><a href="#311-usestate">3.1.1 useState</a></li> <li><a href="#312-useeffect">3.1.2 useEffect</a></li> <li><a href="#313-usecontext">3.1.3 useContext</a></li> </ul> </li> <li><a href="#32-%E9%AB%98%E7%BA%A7hooks">3.2 高级Hooks</a> <ul> <li><a href="#321-usereducer">3.2.1 useReducer</a></li> <li><a href="#322-usememo-%E5%92%8C-usecallback">3.2.2 useMemo 和 useCallback</a></li> <li><a href="#323-useref-%E5%92%8C-useimperativehandle">3.2.3 useRef 和 useImperativeHandle</a></li> </ul> </li> <li><a href="#33-%E8%87%AA%E5%AE%9A%E4%B9%89hooks">3.3 自定义Hooks</a> <ul> <li><a href="#331-%E8%AE%BE%E8%AE%A1%E5%8E%9F%E5%88%99">3.3.1 设计原则</a></li> <li><a href="#332-%E5%B8%B8%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89hooks">3.3.2 常用自定义Hooks</a></li> </ul> </li> </ul> </li> <li><a href="#4-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E4%B8%8E%E6%95%B0%E6%8D%AE%E6%B5%81">4. 状态管理与数据流</a> <ul> <li><a href="#41-%E6%9C%AC%E5%9C%B0%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86">4.1 本地状态管理</a> <ul> <li><a href="#411-%E7%BB%84%E4%BB%B6%E5%86%85%E7%8A%B6%E6%80%81">4.1.1 组件内状态</a></li> <li><a href="#412-%E7%8A%B6%E6%80%81%E6%8F%90%E5%8D%87">4.1.2 状态提升</a></li> </ul> </li> <li><a href="#42-context-api">4.2 Context API</a> <ul> <li><a href="#421-context%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95">4.2.1 Context基础用法</a></li> <li><a href="#422-context%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">4.2.2 Context最佳实践</a></li> </ul> </li> <li><a href="#43-%E7%AC%AC%E4%B8%89%E6%96%B9%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86">4.3 第三方状态管理</a> <ul> <li><a href="#431-redux">4.3.1 Redux</a></li> <li><a href="#432-zustand">4.3.2 Zustand</a></li> <li><a href="#433-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%96%B9%E6%A1%88%E5%AF%B9%E6%AF%94">4.3.3 状态管理方案对比</a></li> </ul> </li> </ul> </li> <li><a href="#5-%E8%B7%AF%E7%94%B1%E4%B8%8E%E5%AF%BC%E8%88%AA">5. 路由与导航</a> <ul> <li><a href="#51-react-router%E5%9F%BA%E7%A1%80">5.1 React Router基础</a> <ul> <li><a href="#511-%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE">5.1.1 路由配置</a></li> <li><a href="#512-%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0">5.1.2 路由参数</a></li> </ul> </li> <li><a href="#52-%E9%AB%98%E7%BA%A7%E8%B7%AF%E7%94%B1%E7%89%B9%E6%80%A7">5.2 高级路由特性</a> <ul> <li><a href="#521-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1">5.2.1 嵌套路由</a></li> <li><a href="#522-%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB">5.2.2 路由守卫</a></li> <li><a href="#523-%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2%E4%B8%8E%E6%87%92%E5%8A%A0%E8%BD%BD">5.2.3 代码分割与懒加载</a></li> </ul> </li> </ul> </li> <li><a href="#6-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">6. 性能优化与最佳实践</a> <ul> <li><a href="#61-react%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96">6.1 React性能优化</a> <ul> <li><a href="#611-reactmemo">6.1.1 React.memo</a></li> <li><a href="#612-usememo%E5%92%8Cusecallback">6.1.2 useMemo和useCallback</a></li> <li><a href="#613-concurrent-mode">6.1.3 Concurrent Mode</a></li> </ul> </li> <li><a href="#62-%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2%E4%B8%8E%E6%87%92%E5%8A%A0%E8%BD%BD">6.2 代码分割与懒加载</a> <ul> <li><a href="#621-%E5%8A%A8%E6%80%81%E5%AF%BC%E5%85%A5">6.2.1 动态导入</a></li> <li><a href="#622-suspense%E4%B8%8Eerrorboundary">6.2.2 Suspense与ErrorBoundary</a></li> </ul> </li> <li><a href="#63-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">6.3 最佳实践</a> <ul> <li><a href="#631-%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1%E5%8E%9F%E5%88%99">6.3.1 组件设计原则</a></li> <li><a href="#632-%E6%80%A7%E8%83%BD%E7%9B%91%E6%8E%A7">6.3.2 性能监控</a></li> </ul> </li> </ul> </li> <li><a href="#7-%E6%B5%8B%E8%AF%95%E4%B8%8E%E8%B4%A8%E9%87%8F%E4%BF%9D%E8%AF%81">7. 测试与质量保证</a> <ul> <li><a href="#71-%E6%B5%8B%E8%AF%95%E5%9F%BA%E7%A1%80">7.1 测试基础</a> <ul> <li><a href="#711-%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE">7.1.1 测试环境配置</a></li> <li><a href="#712-%E6%B5%8B%E8%AF%95%E7%B1%BB%E5%9E%8B">7.1.2 测试类型</a></li> </ul> </li> <li><a href="#72-%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95">7.2 单元测试</a> <ul> <li><a href="#721-jest%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6">7.2.1 Jest测试框架</a></li> <li><a href="#722-react-testing-library">7.2.2 React Testing Library</a></li> </ul> </li> <li><a href="#73-%E9%9B%86%E6%88%90%E6%B5%8B%E8%AF%95%E4%B8%8Ee2e%E6%B5%8B%E8%AF%95">7.3 集成测试与E2E测试</a> <ul> <li><a href="#731-%E7%BB%84%E4%BB%B6%E9%9B%86%E6%88%90%E6%B5%8B%E8%AF%95">7.3.1 组件集成测试</a></li> <li><a href="#732-cypress-e2e%E6%B5%8B%E8%AF%95">7.3.2 Cypress E2E测试</a></li> </ul> </li> </ul> </li> <li><a href="#8-react-%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F">8. React 生态系统</a> <ul> <li><a href="#81-ui%E7%BB%84%E4%BB%B6%E5%BA%93">8.1 UI组件库</a> <ul> <li><a href="#811-ant-design">8.1.1 Ant Design</a></li> <li><a href="#812-material-ui">8.1.2 Material-UI</a></li> <li><a href="#813-%E7%BB%84%E4%BB%B6%E5%BA%93%E9%80%89%E6%8B%A9">8.1.3 组件库选择</a></li> </ul> </li> <li><a href="#82-%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7">8.2 构建工具</a> <ul> <li><a href="#821-create-react-app">8.2.1 Create React App</a></li> <li><a href="#822-vite">8.2.2 Vite</a></li> <li><a href="#823-webpack%E9%85%8D%E7%BD%AE">8.2.3 Webpack配置</a></li> </ul> </li> <li><a href="#83-%E5%85%A8%E6%A0%88%E6%A1%86%E6%9E%B6">8.3 全栈框架</a> <ul> <li><a href="#831-nextjs">8.3.1 Next.js</a></li> <li><a href="#832-remix">8.3.2 Remix</a></li> <li><a href="#833-gatsby">8.3.3 Gatsby</a></li> </ul> </li> </ul> </li> <li><a href="#9-%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE%E6%A1%88%E4%BE%8B">9. 实战项目案例</a> <ul> <li><a href="#91-%E5%BE%85%E5%8A%9E%E4%BA%8B%E9%A1%B9%E5%BA%94%E7%94%A8">9.1 待办事项应用</a> <ul> <li><a href="#911-%E9%A1%B9%E7%9B%AE%E6%9E%B6%E6%9E%84">9.1.1 项目架构</a></li> <li><a href="#912-%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0">9.1.2 功能实现</a></li> </ul> </li> <li><a href="#92-%E7%94%B5%E5%95%86%E8%B4%AD%E7%89%A9%E8%BD%A6">9.2 电商购物车</a> <ul> <li><a href="#921-%E7%8A%B6%E6%80%81%E8%AE%BE%E8%AE%A1">9.2.1 状态设计</a></li> <li><a href="#922-%E7%BB%84%E4%BB%B6%E6%8B%86%E5%88%86">9.2.2 组件拆分</a></li> </ul> </li> <li><a href="#93-%E5%AE%9E%E6%97%B6%E8%81%8A%E5%A4%A9%E5%BA%94%E7%94%A8">9.3 实时聊天应用</a> <ul> <li><a href="#931-websocket%E9%9B%86%E6%88%90">9.3.1 WebSocket集成</a></li> <li><a href="#932-%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86">9.3.2 消息管理</a></li> </ul> </li> </ul> </li> <li><a href="#10-react-%E9%9D%A2%E8%AF%95%E9%A2%98%E8%AF%A6%E8%A7%A3">10. React 面试题详解</a> <ul> <li><a href="#101-%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E7%B1%BB">10.1 基础概念类</a> <ul> <li><a href="#q1-%E4%BB%80%E4%B9%88%E6%98%AFreactreact%E6%9C%89%E5%93%AA%E4%BA%9B%E7%89%B9%E7%82%B9">Q1: 什么是React？React有哪些特点？</a></li> <li><a href="#q2-%E4%BB%80%E4%B9%88%E6%98%AF%E8%99%9A%E6%8B%9Fdom%E8%99%9A%E6%8B%9Fdom%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88">Q2: 什么是虚拟DOM？虚拟DOM的工作原理是什么？</a></li> <li><a href="#q3-%E8%A7%A3%E9%87%8Areact%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%96%B9%E6%B3%95">Q3: 解释React的生命周期方法</a></li> <li><a href="#q4-%E4%BB%80%E4%B9%88%E6%98%AFjsxjsx%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88">Q4: 什么是JSX？JSX的原理是什么？</a></li> <li><a href="#q5-react%E4%B8%AD%E7%9A%84key%E5%B1%9E%E6%80%A7%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8">Q5: React中的key属性有什么作用？</a></li> </ul> </li> <li><a href="#102-%E7%BB%84%E4%BB%B6%E4%B8%8E%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%B1%BB">10.2 组件与生命周期类</a> <ul> <li><a href="#q6-%E7%B1%BB%E7%BB%84%E4%BB%B6%E5%92%8C%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB">Q6: 类组件和函数组件有什么区别？</a></li> <li><a href="#q7-%E4%BB%80%E4%B9%88%E6%98%AF%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6hoc%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0">Q7: 什么是高阶组件(HOC)？如何实现？</a></li> <li><a href="#q8-%E4%BB%80%E4%B9%88%E6%98%AFrender-props%E6%A8%A1%E5%BC%8F">Q8: 什么是Render Props模式？</a></li> </ul> </li> <li><a href="#103-hooks-%E6%B7%B1%E5%BA%A6%E7%90%86%E8%A7%A3%E7%B1%BB">10.3 Hooks 深度理解类</a> <ul> <li><a href="#q9-useeffect%E7%9A%84%E4%BE%9D%E8%B5%96%E6%95%B0%E7%BB%84%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84">Q9: useEffect的依赖数组是如何工作的？</a></li> <li><a href="#q10-%E4%B8%BA%E4%BB%80%E4%B9%88usestate%E7%9A%84%E6%9B%B4%E6%96%B0%E6%98%AF%E5%BC%82%E6%AD%A5%E7%9A%84">Q10: 为什么useState的更新是异步的？</a></li> </ul> </li> <li><a href="#104-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%B1%BB">10.4 性能优化类</a> <ul> <li><a href="#q11-react%E4%B8%AD%E6%9C%89%E5%93%AA%E4%BA%9B%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%8A%80%E6%9C%AF">Q11: React中有哪些性能优化技术？</a></li> <li><a href="#q12-%E4%BB%80%E4%B9%88%E6%98%AFreact-fiber%E5%AE%83%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98">Q12: 什么是React Fiber？它解决了什么问题？</a></li> </ul> </li> <li><a href="#105-%E5%AE%9E%E6%88%98%E5%BA%94%E7%94%A8%E7%B1%BB">10.5 实战应用类</a> <ul> <li><a href="#q13-%E5%A6%82%E4%BD%95%E5%9C%A8react%E4%B8%AD%E5%AE%9E%E7%8E%B0%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86">Q13: 如何在React中实现状态管理？</a></li> <li><a href="#q14-%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86react%E4%B8%AD%E7%9A%84%E9%94%99%E8%AF%AF%E8%BE%B9%E7%95%8C">Q14: 如何处理React中的错误边界？</a></li> <li><a href="#q15-react%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93">Q15: React中如何实现条件渲染？</a></li> </ul> </li> </ul> </li> <li><a href="#-%E6%80%BB%E7%BB%93">📚 总结</a> <ul> <li><a href="#-%E6%A0%B8%E5%BF%83%E5%86%85%E5%AE%B9">🎯 核心内容</a></li> <li><a href="#-%E6%8A%80%E6%9C%AF%E7%89%B9%E8%89%B2">✅ 技术特色</a></li> </ul> </li> </ul> </li> </ul> </details> <h2 id="1-react-概述与核心概念">1. React 概述与核心概念</h2> <h3 id="11-react-简介">1.1 React 简介</h3> <h4 id="111-react-特点与优势">1.1.1 React 特点与优势</h4> <p><strong>React</strong>是由Facebook开发的用于构建用户界面的JavaScript库，于2013年开源。它采用组件化开发模式，通过虚拟DOM提升性能，是现代前端开发的核心技术之一。</p>