1. 从“会写页面”到“理解React”先搞懂它到底解决什么问题我在刚开始接触React的时候说实话挺懵的。网上教程铺天盖地有的讲JSX语法有的讲组件生命周期还有的上来就让你配Webpack、搭脚手架结果折腾半天页面没写几行各种报错倒是见了一堆。很多初学者学React最大的障碍其实不是语法本身而是不知道React这套东西是为了解决什么痛点才出现的。React本质上是一个用于构建用户界面的JavaScript库核心思想是“组件化”和“声明式”。传统开发方式里我们要手动操作DOM来更新页面比如document.getElementById(xxx).innerHTML ...这种命令式写法在小页面里没问题但一旦应用变复杂数据和页面状态纠缠在一起你很容易就搞不清楚“到底是哪个操作导致页面变成了现在这个样子”。React把界面拆成一棵组件树每个组件负责自己的一块UI数据变了组件自动重新渲染。你只需要告诉React“我想要什么状态”React负责“怎么去更新DOM”。这种模式类似你点外卖你只需要下单说要吃什么至于后厨怎么做、骑手怎么送那是平台的事。React就是那个平台它帮你把“数据到页面”的链路统一管理起来。回到标题“react一”我打算把React学习的核心脉络梳理一遍包括它最基础的设计思想、必学的知识点、React 18带来的关键变化以及真实项目里高频出现的坑。这篇适合刚入门React的开发者也适合用React写过一些页面但没系统整理过知识体系的朋友。看完之后你应该能回答“React是什么”“为什么这么设计”“学习重点在哪里”这几个问题。2. 核心设计三件套组件化、虚拟DOM、单向数据流2.1 组件化不是“把页面拆碎”而是“按职责隔离”React应用里的一切都是组件。组件可以是一个按钮、一个输入框也可以是一个完整的页面。但很多新手容易把组件化理解成“把页面切成小块”然后机械地拆文件。这样做出来的组件往往是“假组件”因为它们的边界不是按职责划分的而是按视觉区域划分的。举个例子一个用户信息卡片如果你把它拆成“头像组件”“名字组件”“简介组件”看起来是拆分了但这些组件之间耦合得厉害头像要显示在名字上方简介要跟着名字走改动一个就得动其他几个。正确的做法是把“用户信息卡片”当成一个整体组件内部再考虑是否需要进一步拆分。拆分的标准是“这个部分是否可以被独立复用”以及“它是否拥有独立的状态和职责”。头像图片单独抽出来意义不大但“用户头像带加载失败占位”这个组件就很有价值因为它在多个场景都能用。组件化带来的直接好处是复用性和可测试性。你写一个组件传不同的props进去它就能在不同的地方以不同形态出现。这个思路和搭积木很像积木颗粒的尺寸决定了你能搭出多大的城堡。颗粒太大复用性差颗粒太小组合成本高。React社区目前比较认可的做法是先按业务模块拆再按通用能力抽不要一开始就追求“原子级组件”。2.2 虚拟DOMReact的效率机制但不是免费的虚拟DOM是React绕不开的概念。严格来说虚拟DOM是一个用JavaScript对象描述真实DOM结构的“轻量级副本”。每次数据变化时React先在虚拟DOM上做diff计算找出真正变化的部分然后只更新真实DOM中对应的节点。这样可以减少对真实DOM的直接操作次数因为真实DOM的操作性能开销远大于JavaScript对象操作。但这里有个常见的误解虚拟DOM真的比直接操作DOM“快”吗答案是“不一定”。对于极简单的页面直接操作DOM反而更快因为省去了diff计算的开销。虚拟DOM真正的优势在于它让开发者可以不用手动关心“哪些地方需要更新”React会自动帮你找到最小的更新范围。这就像你请了一个保洁阿姨你自己擦桌子可能更快但如果你家是三层别墅阿姨能帮你系统地安排打扫顺序避免你来回跑。另外要注意React 18引入了并发特性之后渲染过程可以被中断、被调度这意味着“虚拟DOM diff”不再是每次都同步完成而是可以在多个渲染任务之间分配时间片。这一点后面我会单独讲。2.3 单向数据流state和props各司其职React的数据流动方向是单向的父组件通过props向子组件传数据子组件不能直接修改父组件的状态只能通过回调函数通知父组件去改。这种设计看起来很“死板”但它极大提升了应用的可预测性。我记得有一次面试React岗位时面试官问我“React为什么设计成单向数据流”。我当时的回答是“方便调试和定位问题”现在回想起来这个答案不够全面。单向数据流最大的价值在于“数据变更路径是确定的”当页面出现bug时你能顺着props和state的传播链迅速找到罪魁祸首。如果数据可以随意被任何组件修改就像一间办公室里谁都能改财务报表最后出了问题根本不知道是谁改的。state和props的区别也必须搞清楚state是组件内部自己管理的数据可以变化props是外部传入的数据组件自身不应该去修改它。很多新手会犯一个错误就是直接把props拷贝到state里再修改这往往会导致数据源不统一产生“不同步”的诡异bug。正确的做法是能不用state就不用state优先从props直接取数据只有当数据确实需要“内部状态”时才用state管理。3. 学习React前必须攻克的知识点清单3.1 JSX用写HTML的方式写JavaScriptJSX是React的核心语法扩展看起来像HTML但实际上是JavaScript的语法糖。比如div classNameboxHello/div在编译后其实是React.createElement(div, { className: box }, Hello)。初学者最容易被JSX的几个细节绊倒class要写成className因为class是JavaScript的保留字。事件用驼峰命名比如onClick、onChange并且接收的是一个函数引用而不是字符串。内联样式要写成对象形式style{{ color: red }}外层大括号是JSX语法内层是对象字面量。JSX必须有一个根节点React 16之前必须有React 17之后可以用.../空标签来包裹。我教新手写JSX时喜欢让他们先理解“JSX就是长得像HTML的JavaScript表达式”。你可以在JSX里做{condition ? A/ : B/}这种条件渲染也可以做{list.map(item Item key{item.id} data{item} /)}这种列表渲染。能像写JavaScript一样灵活地拼接UI是React开发的基础能力。有一个细节很多教程不会提JSX里的注释写作{/* 注释内容 */}。这个我当年找了好久才搞清楚写出来给各位排个雷。3.2 组件写法函数组件与类组件的取舍React早期的组件主要分两种函数组件无状态、纯展示和类组件有状态、有生命周期。2019年React 16.8引入Hooks之后函数组件也能管理状态和副作用而且代码更简洁社区已经全面转向函数组件。现在的建议是新项目一律用函数组件加Hooks老项目维护时遇到类组件也别急着全部重写两者能在同一项目中共存。类组件里的this.setState是异步的连续调用会触发批量更新函数组件里的useState的set方法也类似但用法上有区别。我没少在面试里碰到候选人把this.setState({ count: this.state.count 1 })和setCount(count 1)混着说这两个逻辑不一样前者依赖this.state.count的当前值后者依赖闭包捕获的count值。如果在一个函数里连续两次setCount(count 1)页面并不会加2因为两次拿到的count都是同一个旧值正确写法是setCount(prev prev 1)。这个细节太重要了希望大家第一次学的时候就记住不然到时候调试半天也找不到问题。3.3 生命周期与Hooks的对应关系类组件的生命周期分为挂载期、更新期、卸载期三个阶段。挂载期依次执行constructor、render、componentDidMount更新期有shouldComponentUpdate、componentDidUpdate卸载期只有componentWillUnmount。函数组件没有这些方法但Hooks提供了对应的能力useEffect(() {...}, [])相当于componentDidMount只在挂载时执行一次。useEffect(() {...})不带依赖数组相当于componentDidMount加componentDidUpdate每次渲染都执行。useEffect(() {...}, [dep])在dep变化时才执行。useEffect(() { return () {...} }, [])中的返回函数相当于componentWillUnmount用来清理定时器、取消订阅等。实际开发中我经常看到有人滥用useEffect——把所有逻辑都往里面塞。这是一个容易踩的坑。useEffect不是用于“计算派生数据”的而是用于“同步外部系统”比如请求接口、订阅事件的。如果一个值能通过props或state直接推导出来就不应该用useEffect去计算直接写在render阶段或者用useMemo处理即可。滥用useEffect容易导致不必要的重复渲染和难以追踪的副作用链。4. React 18带来的关键变化更新批处理机制React 18是近年最重要的大版本更新之一核心变化在于“并发特性”和“更新批处理Batching”。很多面试题也聚焦在这里值得重点展开。4.1 什么是更新批处理React中的批处理指的是将多次状态更新合并为一次重新渲染。React 17及之前只有在React事件处理函数里的更新才会自动批处理。比如function handleClick() { setCount(c c 1); setFlag(f !f); // 一次点击React只会触发一次渲染 }但如果在setTimeout、Promise回调、原生事件处理函数里更新状态React并不会自动批处理每次setState都会触发一次独立的渲染这对性能不太友好。React 18的自动批处理扩展了范围无论更新发生在哪——事件处理函数、Promise、setTimeout、原生事件——React都会自动把同一事件循环内的多个状态更新合并为一次重渲染。这真的很实用我在项目里用setTimeout里连续更新两个状态时就不用再手动包一层unstable_batchedUpdates了。4.2 依然需要ReactDOM.createRoot要注意的是React 18必须使用createRoot来启动应用旧的ReactDOM.render虽然还能用但会有一个警告提示并且不会启用React 18的全部特性。import { createRoot } from react-dom/client; const root createRoot(document.getElementById(root)); root.render(App /);我见过不少项目从React 17升级到18后页面功能看起来一切正常但性能没有任何提升原因往往就是因为还在用旧的render启动方式。createRoot是React 18并发特性的入口不用它很多新能力等于没开。4.3 startTransition和useTransition让更新“不那么着急”React 18还引入了startTransition用来标记某些状态更新的优先级是“可延迟的”。比如用户在输入框里打字输入内容的更新优先级很高必须立即响应而根据输入渲染出来的长列表结果优先级可以放低等主线程空下来再渲染。import { startTransition, useState } from react; const [input, setInput] useState(); const [list, setList] useState([]); function handleChange(e) { const value e.target.value; setInput(value); // 紧急更新立即响应 startTransition(() { // 非紧急更新可中断 const filtered largeList.filter(item item.includes(value)); setList(filtered); }); }这个设计非常实用尤其是页面里用了很多重型组件或者过滤大数组的时候。我自己的项目里搜索功能之前一直感觉输入有一顿一顿的卡顿给过滤逻辑套上startTransition之后手感顺滑了不少。原理是React会把transition里的更新拆成一小片一小片去执行期间不断让出主线程给紧急更新用户输入就不会被“阻塞”。需要注意startTransition不是万能的它不能让一个本身就很慢的计算变快只是让这个计算“不阻塞其他事情”。如果计算量大到超出可接受范围还是需要配合虚拟滚动、懒加载等手段来做真正的性能优化。5. 真实业务场景中的避坑指南只谈理论不结合实际等于纸上谈兵。我在项目里用过React、React Native也用Taro开发过跨端小程序遇到过的坑能写出一长串这里挑几个高频且容易被忽视的分享给大家。5.1 React与Taro开发跨端项目的“双胞胎陷阱”Taro是基于React语法写多端应用微信小程序、H5、React Native等的框架。它的核心思路是写一套React代码编译到不同平台。但这套方案的最大“坑”在于React开发的思维方式和微信小程序的运行环境有差异。首先Taro 3.x兼容的是React的语法但不是所有React API都能直接用。比如ReactDOM.render就没法用因为Taro的运行时不是浏览器环境。在Taro里开发要遵循“一码多端”的约束尽量避免使用浏览器特有的API如window、document。其次Taro的组件和样式在某些端上有兼容性限制。我记得有一次在Taro项目里用了一个自定义组件H5端表现正常但小程序端样式完全错乱排查了好久才发现是CSS选择器嵌套过深小程序不支持。后来总结出一个经验Taro跨端项目里样式层级尽量控制在3层以内选择器不要写得太复杂。另外Taro项目里图片资源处理也要注意小程序端不支持H5那种动态拼接远程图片URL的方式需要把所有图片路径保持在编译能找到的范围内。如果图片放在CDN上URL必须是完整的https://地址不能用相对路径拼。5.2 React Native启动白屏问题及优化思路React Native应用启动时会经历“加载JS Bundle - 执行JS - 渲染原生视图”的过程。白屏主要是因为“JS Bundle还没有执行完毕首页UI还没有被渲染出来”。在低端Android设备上这个白屏时间可能长达2到3秒非常影响体验。我给方案加过几个优化手段开启Hermes引擎。Hermes是React Native专门优化的JavaScript引擎能显著缩短启动时解析JS的时间。Android项目在React Native 0.70之后默认开启iOS需要手动打开。让原生启动页保持到JS渲染完成。可以借助react-native-splash-screen在useEffect中调用SplashScreen.hide()等首屏真正渲染后再隐藏启动页视觉上没有白屏只有启动页停留时间稍长。首屏关键数据本地缓存。如果首页依赖网络请求可以把上次浏览的数据先存本地如AsyncStorage启动时先展示缓存数据请求成功后再次更新。这样用户打开App立刻能看到内容而不是白屏等数据。白屏问题的核心就是“数据与UI的可用时间差”优化的本质就是让用户有东西可看。5.3 集成bpmn.js实现自定义流程图React组件化封装工作流类项目里经常要画流程图bpmn.js是BPMN 2.0流程图的JavaScript渲染库。在React项目里集成bpmn.js和直接在HTML页面里用有一些不同。bpmn.js本身的API是基于原生DOM操作的直接塞进React组件里不会有问题但如果让React重新渲染了容器节点之前bpmn.js实例可能就失效了。稳妥的做法是用useEffect在组件挂载后初始化bpmn.js实例。初始化时传入容器元素的ref。在清理函数中调用bpmnModeler.destroy()销毁实例。import BpmnModeler from bpmn-js/lib/Modeler; function BpmnViewer({ xml }) { const containerRef useRef(null); const modelerRef useRef(null); useEffect(() { const modeler new BpmnModeler({ container: containerRef.current, }); modelerRef.current modeler; modeler.importXML(xml).catch(err { console.error(流程解析失败, err); }); return () { modeler.destroy(); }; }, [xml]); return div ref{containerRef} style{{ height: 600px }} /; }这里特别要注意xml作为依赖项如果父组件频繁更新导致xml引用变化组件会重新加载流程图。如果XML内容不变建议用useMemo缓存避免每次父组件重渲染都触发流程重绘。另外bpmn.js的CSS文件需要单独引入否则流程图元素样式会全部失效显示错乱。5.4 React与Vue路由差异在不同业务场景下如何选择React Router和Vue Router的核心机制有一些相通之处都支持嵌套路由、路由懒加载、路由守卫。但在使用体验上两者有明显差异。React Router以v6为例的路由配置是一个普通的JavaScript对象或数组你可以像写React组件一样去组织路由Routes Route path/ element{Home /} Route pathuser element{User /} / /Route /RoutesVue Router则使用更“配置化”的方式路由表是一个数组里面有path、component、children等字段。Vue Router的路由守卫beforeEach、beforeResolve、afterEach是框架内置能力语法上很像中间件React Router没有提供类似的路由守卫你需要自己封装一个高阶组件或在布局组件里做校验。业务选型时的参考如果项目以组件为中心追求灵活组合React Router更顺手。如果项目大量依赖“页面级权限校验”“多个路由共用布局模板”Vue Router的内置守卫和嵌套路由配置会让代码更结构化。如果团队只有一套后端技术栈Vue和Vue Router的文档风格对新手更友好如果团队本身就熟悉JSX和函数式思想React更自然。说到底路由选型跟着框架走就行很少会有人为了路由单独去选框架但了解差异对面试和方案评审都很有用。6. 热门面试题与学习路线用输出倒逼输入6.1 高频React面试题梳理React相关的面试题问来问去其实就那几类。梳理一下常见的高频考点你再去应酬“react面经”这个关键词时就能做到心里有数。第一类是原理题。比如“React的虚拟DOM是如何工作的”“什么是Fiber架构”“React的调和reconciliation过程是怎样的”这类题的考察点不是要你背概念而是看你能不能把“从状态更新到UI变化”这条链路完整讲清楚。Fiber架构的核心是“让渲染可中断”React把整个渲染工作拆成一个个小单元Fiber节点优先处理紧急更新中途可以暂停并让出主线程。第二类是Hooks题。比如“useEffect和useLayoutEffect的区别是什么”“为什么不能在循环、条件语句里调用Hook”“useMemo和useCallback分别解决了什么性能问题”这些都是业务里真实会用到的细节。useEffect是在浏览器绘制之后异步执行的useLayoutEffect是在DOM变更后同步执行的如果需要在页面绘制前读取布局并同步修改样式必须用useLayoutEffect否则会出现闪烁。第三类是工程化题。比如“React项目为什么需要key”“受控组件和非受控组件有什么区别”“如何对React应用做性能优化”key的作用是帮助React识别列表项身份不推荐用数组index做key因为增删项时会导致组件状态错乱。受控组件是指表单值由React state管理非受控组件由DOM自身管理需要通过ref去取值。性能优化不外乎懒加载、memo、useMemo、useCallback、虚拟列表这些手段。6.2 从入门到精通一条清晰的学习路径很多初学者在“React入门到精通”的路径上走偏是因为太喜欢“看”而不喜欢“写”。React是一门实践性极强的技能光看文档和视频不写代码很快就会忘记。我推荐的学习路径大致是分层的第一阶段掌握基础语法和组件化思想。能用Create React App现在也可以用Vite搭一个项目把官方文档的“Main Concepts”读一遍用手写一个ToDoList。这个阶段的目标是熟悉JSX、组件、props、state、事件处理。第二阶段掌握Hooks。把所有内置Hook过一遍然后用Hooks重构第一阶段的ToDoList。重点理解useEffect的执行时机、useMemo和useCallback的适用场景。可以试着做一个模拟请求列表的页面加入加载态、错误态。第三阶段掌握路由和状态管理。用React Router做一个多页面应用再接上Redux Toolkit或Zustand。这一阶段建议做一个小项目比如简易博客系统涵盖列表页、详情页、登录注册、发布文章等模块。第四阶段深入原理。读React官方文档中关于Reconciliation和Concurrent Mode的章节尝试自己手写一个简化版React不用实现全部功能只要能说明CreateElement和Render的基本流程即可理解Fiber调度机制。此时再看源码会有完全不同的收获。第五阶段工程化与跨端。学习项目脚手架配置、单元测试、性能分析工具React Profiler、React Native或Taro等跨端方案。到了这个阶段才真正算是“能应对生产环境”。6.3 亲手构建一个加减法计算器项目快速验证学习成果热词里有“react项目构建加减法计算器”别看“加减法计算器”听起来简单它其实是检验React基础的好项目。它包含了输入组件、按钮组件、结果显示组件、状态管理逻辑麻雀虽小五脏俱全。项目拆解Calculator组件是容器负责维护num1、num2和result状态。两个NumberInput组件负责接收输入通过props回调更新父组件状态。OperatorButton负责触发“加减”运算。结果显示区域负责展示计算结果。关键代码大概是function Calculator() { const [num1, setNum1] useState(0); const [num2, setNum2] useState(0); const [result, setResult] useState(null); const handleCalculate (type) { if (type add) { setResult(num1 num2); } else if (type subtract) { setResult(num1 - num2); } }; return ( div input typenumber value{num1} onChange{(e) setNum1(Number(e.target.value))} / input typenumber value{num2} onChange{(e) setNum2(Number(e.target.value))} / button onClick{() handleCalculate(add)}/button button onClick{() handleCalculate(subtract)}-/button div结果{result ! null ? result : 尚未计算}/div /div ); }别看这段代码简单里面包含了受控组件的值绑定、事件处理函数传参、父子组件状态联动、条件渲染结果。能把这个项目做到“组件拆分合理、交互完整、边界情况比如输入非数字有兜底”说明React入门基础已经扎实了。7. 后续还能怎么延伸“react一”这篇我先覆盖了基础认知、核心概念、版本变化和实操避坑这几个板块。React真的太庞大了一篇写不完。后续系列文章里我准备单独展开讲讲Hooks的进阶用法比如自定义Hooks的设计模式、React性能优化的实战排查方法、React Native的完整启动流程优化、以及React和Taro、bpmn.js这类生态集成的具体案例。如果你正在学React我最大的建议是不要被“面经”和“面试八股”带着走先把基础概念搞透然后用项目把知识串起来。面试题会过时但“组件化思维”“数据流设计”“状态管理思路”这些底层能力不会过时。等你能把一个简单项目从零搭起来并且能说出每一步为什么这么做React的大门就算真正为你打开了。