1. 从零开始认识React为什么它值得你花时间先说个我的亲身体会。我做了快十年的前端开发早期用jQuery时代操作DOM那是家常便饭一个页面几百行代码稀松平常。后来项目越做越大我开始意识到一个问题数据和界面之间的关系如果全靠手动同步早晚会出乱子。这也是React能火起来的根本原因——它把“数据到界面的映射”这件事变成了一套可预测、可维护的机制。React不是框架严格来说它是一个用于构建用户界面的JavaScript库。它解决的核心痛点是当你有一份数据要把它展示在页面上并且数据变了页面要跟着变时如何让这个过程高效、稳定、不乱套。React给出的答案是组件化加声明式UI。你只需要描述“界面应该长什么样”React负责把“变成什么样”的脏活累活接过去。拿我自己第一次接触React的经历来说当时我还是用“字符串拼接HTML再插进DOM”的思维在写代码第一次看到JSX时其实有点别扭——JavaScript里嵌着HTML标签这什么玩意儿但当我真正理解了组件化的思路之后我回头看老代码简直想全部重写。因为这个东西的思维方式完全不一样它把页面拆成一个一个独立的组件每个组件只管自己的数据和自己的界面组件之间通过props通信。这套思路在大型项目中带来的维护性提升是任何工具链优化都比不上的。这篇“React系列-1”作为整个系列的开篇我打算不急着写代码而是先把React的核心思维、和Vue的对比、生命周期、Fiber工作机制这些基础概念给你讲透。因为我在带新人的时候发现很多人上来就写组件、调hook最后写出了一堆“React写法的jQuery代码”——能用但完全没吃到React的红利。所以这个系列我会从底层逻辑开始一步一步带你建立正确的React心智模型。那这篇适合谁看准备入门React的应届生、被面试题折磨的求职者、以及写了React但总觉得哪里没学透的在职前端这篇都应该能帮到你。我会把网上那些碎片化教程里讲不清楚的东西用大白话给你捋一遍。2. React和Vue的区别别只背面试题要理解设计哲学的差异2.1 模板语法与JSX的本质差异“Vue和React的区别”是网上搜索量最高的React相关关键词之一也是面试必问的题。很多人背答案说“Vue用模板React用JSX”但这只是表面。本质上Vue把HTML当作一个可以增强的模板你在HTML里加指令、加插值框架替你去解析和编译这些模板语法React把JavaScript当作语言本体JSX只是JavaScript的语法糖它的编译过程就是把JSX的标签结构转换成React.createElement调用。这两个方向决定的差异是深远的。用Vue的时候你会觉得HTML是主语言JavaScript是辅助用React的时候你的所有能力都建立在“JavaScript有多强React就有多强”的基础上。比如在React里想要条件渲染直接写{condition Component /}这是JavaScript的短路求值在Vue里则要写v-if指令。从表达能力上来讲React的JSX更自由但也正因为自由新手容易写得乱七八糟Vue的模板有语法约束反而逼着你写出更规范的结构。我自己两个都用过我的感受是Vue上手快、模板结构清晰、中文文档友好适合中小团队快速开发React的曲线更陡峭但当你习惯了组件化的思考方式之后它的心智模型非常统一整个项目写下来不会有“这里该用指令、那里该用计算属性”这样的割裂感。2.2 响应式原理Vue的依赖追踪 vs React的主动渲染另一个核心差异是数据更新机制。Vue 3的响应式基于Proxy它会精确追踪数据的依赖关系数据变了只有依赖这条数据的组件会重新渲染这是细粒度的响应式。React则用的是主动渲染——不管数据怎么变的组件都会重新执行一遍render函数然后通过diff算法找出新旧虚拟DOM的差异把变更应用到真实DOM上。这两条路线各有优劣。Vue的细粒度追踪性能好、更新精确但在大型项目里追踪依赖本身也有开销而且如果嵌套层级过深要小心处理响应式丢失的问题。React的主动渲染思路简单粗暴数据变了我就全量算一遍反正有diff算法帮我找出差异。这种思路的优点是心智负担低——你不需要担心你的数据是不是“响应式”的普通变量、普通对象一切照常缺点是需要React自己去做优化比如我们常说的shouldComponentUpdate、memo、useMemo本质上都是为了让React“少做无用功”。我记得刚转React的时候做一个小功能数据更新了但页面不刷新Vue里第一反应是“我的数据没有声明为响应式的”React里第一反应是“我的组件是不是被React.memo包住了导致没触发更新”。两种解决问题的思路完全平行这一点是React和Vue新手最容易混淆的地方。2.3 Vue和React怎么选我的现实建议选型这个问题没有标准答案但我可以说几个实际场景。如果你公司有大量后端转前端的同事Vue的模板语言门槛更低如果你搞的是中后台系统、数据可视化大屏这类交互复杂、状态多的项目React的组件化模型和生态更友好如果你想转React Native做移动端那不用纠结直接学React。从就业市场上看国内一线互联网公司的中后台和大型前端项目React的占比依然很高。Vue在中小企业和外包项目里更常见。我的经验是别把时间花在纠结选型上两个都学先把一个学透另一个用三天就能上手。前端的基础相通核心的DOM操作、事件循环、异步编程这些通了框架就是工具。3. React的核心原理JSX、组件和生命周期3.1 JSX和虚拟DOM为什么你写的是JS不是HTMLJSX是React的门面但它经常被误解成“在JavaScript里写HTML”。严格来说JSX是React.createElement(component, props, ...children)的语法糖。你写的const element h1 classNamegreetingHello, world!/h1;编译之后其实是const element React.createElement( h1, { className: greeting }, Hello, world! );这个转换是由Babel或者其他编译工具完成的。为什么React不直接让你用createElement写因为那太繁琐了嵌套层级一多你写的代码会变成一坨难以阅读的函数调用。JSX的出现是为了让代码的可读性回到“写HTML模板”的顺滑程度同时保留JavaScript的全部表达能力。这里的核心概念是虚拟DOMVirtual DOM。每次数据变化React会先生成一个新的虚拟DOM树简单说就是描述界面结构的JavaScript对象然后和上一次的虚拟DOM树做对比diff算法找出差异最后才把差异更新到真实DOM上。真实DOM的操作代价高虚拟DOM之间的比较就是在内存里做JavaScript对象比较代价低得多。这套机制保证了React在大部分场景下的性能都不错同时让开发者不需要手动操作DOM。3.2 为什么React组件每次都返回一个render函数“react为什么每次都返回一个render函数”这个热词还挺有意思的。大家刚开始学React的时候都会疑惑为什么一个组件不直接写一个对象而是一个函数这个“每次返回”又是什么意思我的理解是这样的React组件的本质是一个“数据到UI的纯函数”。输入是props和state输出是虚拟DOM的描述。每次数据变化React都会重新调用这个函数得到一份最新的界面描述。它不会保留上一次的结果去“修改”而是“重新生成一份”。这就是为什么React要用render函数或者在函数组件里就是组件本身来承载渲染逻辑而且这个函数必须是纯粹的——不能有副作用不能直接改外部变量不能依赖会变化的外部状态。给出的同一份输入必然得到同一份输出。很多人写不好React就是因为这个“函数思维”没建立起来。比如有人会在render函数里直接做复杂的计算、发请求、改全局变量这些都是破坏纯函数性质的做法。正确姿势是渲染逻辑只负责把数据映射成UI副作用留给useEffect去处理。记住这一点React的水平至少上一个台阶。3.3 React生命周期从挂载到卸载的完整旅程React生命周期是面试题高频考点也是写React必须烂熟于心的内容。虽然函数组件时代官方推荐用useEffect来“模拟”生命周期但理解类组件的生命周期依然是理解React内部机制的一把钥匙。类组件的生命周期主要分三个阶段挂载阶段Mounting组件被创建并插入DOM。顺序是constructor→static getDerivedStateFromProps→render→componentDidMount。componentDidMount是你发请求、订阅事件、操作DOM的最佳时机因为它保证虚拟DOM已经渲染到真实DOM上了。更新阶段Updating组件的props或state发生变化时触发。顺序是static getDerivedStateFromProps→shouldComponentUpdate→render→getSnapshotBeforeUpdate→componentDidUpdate。这里有一个重要的优化点shouldComponentUpdate它返回false可以让React跳过这次渲染这就是性能优化的基础。卸载阶段Unmounting组件从DOM中移除调用componentDidUnmount。这里一定要清理你在componentDidMount里创建的东西定时器、事件监听器、请求的取消标记否则会内存泄漏。函数组件时代useEffect可以同时模拟挂载和卸载useEffect(() { // 挂载时执行相当于 componentDidMount const timer setInterval(() { /* ... */ }, 1000); // 返回的函数在卸载时执行相当于 componentWillUnmount return () clearInterval(timer); }, []);我在实战中发现很多刚转React hook的同学对useEffect的依赖数组理解不到位。依赖数组里放什么值就决定这个effect什么时候重新执行。空数组表示只在挂载时执行一次不传数组表示每次渲染都执行传入变量表示变量变化时执行。这个设计足够灵活但也容易踩坑——如果你在effect里用了某个外部变量但没写进依赖数组你就拿到了闭包里捕获的旧值这就是经典的“陈旧闭包”问题。4. Fiber架构React性能背后的秘密武器4.1 为什么React需要Fiber“fiber的作用”也是高频搜索词。简单说Fiber是React 16引入的底层架构重写它解决了一个核心问题当组件树很大、渲染耗时很长时旧版React的渲染是同步且不可中断的如果一次渲染需要30毫秒那么这30毫秒内主线程被占住页面会卡顿用户交互点击、输入得不到响应。古早的React版本渲染过程像是一口气跑完的长跑中间不能停。Fiber的厉害之处在于它把渲染工作拆成了一个个小任务单元Fiber节点这些任务可以分片执行执行一段看看有没有更紧急的事比如用户点击、动画帧如果有就把控制权交出去等主线程空闲再继续。这就是React的“并发模式”底层的支撑。生活化类比你要做一桌菜渲染整个页面以前必须先把所有菜全部做完再上桌同步渲染中间亲戚打电话来你也没空接用户交互被阻塞。Fiber的方式是把菜切成片炒完一片先装盘端上去然后趁空隙接个电话处理交互再回厨房继续炒。用户体验就好多了。4.2 Fiber如何实现可中断的渲染Fiber的核心数据结构是一个链表树。每个组件都对应一个Fiber节点这些节点通过链表指针连接React可以记录当前处理到哪个节点暂停后也能从暂停的地方恢复。配合requestIdleCallback这样的APIReact内部自己实现了调度器Fiber可以根据任务的优先级来调度执行顺序。在React 18里这个能力进一步通过startTransition、useDeferredValue等API开放给了开发者。你可以把非紧急的更新标记为transitionReact会在处理完紧急更新后利用空闲时间去处理这些低优先级任务。这个能力在数据量大的表格、复杂图表这类场景尤其有用。4.3 日常开发中怎么利用Fiber的优势大多数人不用深入Fiber源码但理解Fiber能帮你在写代码时做出更合理的决策。比如大型列表用React.memo包裹把状态提升或下放用useMemo缓存昂贵计算在React 18里用startTransition包裹非紧急更新。我自己的一个真实案例之前做一个物联网设备列表两百多个设备的实时数据每秒钟会推送很多条更新。如果不做任何优化整个列表每秒钟重新渲染两百多次页面卡成PPT。后来我用memo包裹列表项用useMemo缓存列表项的props比较再配合startTransition处理设备状态的更新页面瞬间流畅了。Fiber的调度机制加上合理的组件拆分和记忆化才是React性能优化的完整配方。5. React开发实战初始化、调试与常见报错排查5.1 从脚手架到第一个组件3分钟跑起来废话不多说咱们直接上手。现在官方推荐用Vite来创建React项目比老牌的Create React App快得多npm create vitelatest my-react-app -- --template react cd my-react-app npm install npm run dev这个命令会创建一个基于Vite的React项目。Vite的开发服务器启动速度很快而且支持热更新你在编辑器里改代码浏览器几乎瞬间刷新。安装依赖别用npm也可以用pnpm或者yarn看个人习惯我推荐pnpm它更省磁盘空间安装速度也快。跑起来之后你会看到默认的React页面。打开src/App.jsx把它改成你的第一个组件function App() { const [count, setCount] useState(0); return ( div h1我的第一个React组件/h1 p你已经点击了 {count} 次/p button onClick{() setCount(count 1)} 点我加一 /button /div ); } export default App;这个简单的例子已经展示了React最核心的两件事state状态和事件处理。useState返回一个状态值和一个更新函数你调用更新函数React会重新渲染组件。这就是React数据驱动UI的最小演示。5.2 报错排查实录minified React error #130搜索热词里有一条“dsh-better-sidebar: minified React error #130; visit https://reactjs.org/docs/error-decoder.html”这是React的“打包后错误”提示。React在生产环境下报错时错误信息会被压缩只显示一个错误码。这个错误码对应的完整信息需要去官方错误解码器里查询。Error #130对应的完整信息是“Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined”。这个报错的常见原因是你导入了一个不存在的组件或者组件循环引用了。比如你在另一个文件里写import { Sidebar } from ./Sidebar;但Sidebar.jsx的实际导出是export default Sidebar而不是命名导出export const Sidebar就会导致Sidebar为undefined渲染时报Error #130。解决方法是检查导入路径和导出方式是否匹配或者使用React.lazy懒加载时组件名拼写错误也会触发这个错误。我的排查思路是先去看错误码对应的完整信息然后检查所有被引用的组件是否都正确导出和导入。这个报错90%的情况都是导入导出不匹配不是什么高深的问题。5.3 React图表选型antd图表与其他方案对比热搜词里还有“react图表”我顺便聊聊这个。React生态里的图表库选择非常多我实际用过的有ant-design/charts、ECharts for Reactecharts-for-react、Recharts和Visx。库优点缺点适用场景ant-design/charts基于G2Plot图表类型丰富、文档中文、开箱即用包体积大、自定义复杂中后台管理系统的标准图表echarts-for-react底层ECharts性能强、图表类型最多、社区案例多需要自己处理option配置、样式定制成本高数据可视化大屏、复杂图表Recharts组件化写图表、代码可读性好、轻量图表类型相对少、性能大数据量时一般简单报表、仪表盘如果你做的是一个后台管理系统需要快速上线、图表类型常见我推荐ant-design/charts如果你做的是数据大屏对图表类型和性能要求高首选echarts-for-react如果图表只是页面里的点缀数据量不大Recharts就够了。5.4 React Native入门要点白屏与低端机卡顿最后提一下React Native因为热词里出现了“react native 启动白屏”和“react navite 在安卓低端机很卡”。React Native是React的移动端延伸它的核心思路是用JavaScript和React写UI最终渲染成原生组件。“启动白屏”是我见过最多的问题原因通常是JavaScript bundle加载太慢。首页框架已经加载了但JS逻辑没执行完界面就显示白屏。解决办法有几个方向用react-native-bundle-visualizer检查bundle大小做分包加载使用Suspense配合React.lazy做首页组件的懒加载在原生端做启动图占位让用户觉得应用已经加载了用Hermes引擎替代JavaScriptCore启动速度和内存占用都会改善。“安卓低端机很卡”的问题本质上和Web端是一样的渲染开销太大主线程被阻塞。React Native的优化思路包括列表用FlatList而不是ScrollViewFlatList会做窗口化渲染只渲染可视区域的Item减少不必要的setState用InteractionManager把非紧急任务放到交互完成后执行关键页面用原生模块实现比如一些复杂动画直接用Reanimated别让JS线程扛所有压力。6. 面试题、学习路径与离线文档React系列接下来的规划6.1 高频面试题本质解析React面经都在问什么搜索热词里“react面试题”和“react面经”占了大头。我帮人改简历、做模拟面试这些年发现React面试题翻来覆去就是那几类React的事件机制、setState是同步还是异步、虚拟DOM和diff算法、组件通信方式、Hooks原理、性能优化手段、React 18的新特性。这些问题看似独立但背后其实是一条主线React是怎么把数据变成界面然后保持数据和界面同步的。理解了这条主线你根本不需要背题。比如面试官问“setState到底是不是异步的”其实是要考你对React批量更新和Fiber调度的理解——在事件处理函数里React会批量收集多次setState然后一次性更新在setTimeout、Promise回调里React 18之前的版本是同步执行的React 18之后自动批量更新覆盖了这些场景。我在面试别人的时候最看重的不是他能不能背出所有生命周期函数而是能不能讲清楚一个具体的交互场景比如点击按钮加一在React内部到底经历了什么。这种从原理出发的回答才是React面经里的高分答案。6.2 新手最容易踩的坑我的避坑清单写React这几年我总结了一套新手必踩的坑先列出来几个组件内部不要直接修改statestate.items.push(newItem)然后setState是不生效的因为React比较的是引用你直接改了原对象React拿到的还是同一个引用认为没有变化。正确做法是用展开运算符创建新数组。key值不要用index列表渲染时key用index通常不会报错但当你对列表做增删排序时复用逻辑会出bug。用数据里唯一的ID。忘了清理副作用组件卸载后定时器还在跑setState一个已经卸载的组件React 18之前的版本会报警告之后版本也不该这么做。useEffect依赖数组写少了这是“陈旧闭包”的根源我的习惯是如果要用的变量太多干脆用useReducer把相关状态整合在一起。6.3 学习资源推荐React离线文档、教程与自测路径“react离线文档”这个热词说明有一部分人在内网环境或者网速受限的情况下需要本地阅读React文档。React官方文档其实是开源的你可以用git clone把官方仓库克隆下来然后用文档构建工具在本地跑起来。网上也有一些打包好的离线HTML版本下载解压就能看。从学习路径上讲我不建议一上来就死磕官方文档英文版对你可能有门槛更推荐这样的顺序先看基础教程把项目跑起来搞清楚组件、props、state的基本用法然后系统过一遍官方文档的核心概念章节接着做一两个小项目比如一个待办事项、一个数据看板在实践里巩固最后再深入原理看Fiber、diff、调度这些底层机制。这个“React系列-1”只是开篇后续我计划在这个系列里继续深入第2篇讲Hooks的底层实现和自定义Hook的实战技巧第3篇用完整案例拆解React性能优化的全过程第4篇讲React 18的并发特性和新API第5篇对比React Native和Web端的架构差异。如果你在学习过程中有什么想问的、想看的欢迎在评论区留言我会根据大家的反馈调整后续的内容方向。最后说点真心话我在教别人React的时候最常说的就是“别光学API要多问为什么”。React的API没几个翻来覆去就那些但底层的这些设计理念——函数式组件、单向数据流、Fiber调度——才是你真正区别于“会写React”和“懂React”的分水岭。把这层窗户纸捅破了后面学什么都是顺水推舟的事。 React核心原理与实战：从组件化到Fiber架构
1. 从零开始认识React为什么它值得你花时间先说个我的亲身体会。我做了快十年的前端开发早期用jQuery时代操作DOM那是家常便饭一个页面几百行代码稀松平常。后来项目越做越大我开始意识到一个问题数据和界面之间的关系如果全靠手动同步早晚会出乱子。这也是React能火起来的根本原因——它把“数据到界面的映射”这件事变成了一套可预测、可维护的机制。React不是框架严格来说它是一个用于构建用户界面的JavaScript库。它解决的核心痛点是当你有一份数据要把它展示在页面上并且数据变了页面要跟着变时如何让这个过程高效、稳定、不乱套。React给出的答案是组件化加声明式UI。你只需要描述“界面应该长什么样”React负责把“变成什么样”的脏活累活接过去。拿我自己第一次接触React的经历来说当时我还是用“字符串拼接HTML再插进DOM”的思维在写代码第一次看到JSX时其实有点别扭——JavaScript里嵌着HTML标签这什么玩意儿但当我真正理解了组件化的思路之后我回头看老代码简直想全部重写。因为这个东西的思维方式完全不一样它把页面拆成一个一个独立的组件每个组件只管自己的数据和自己的界面组件之间通过props通信。这套思路在大型项目中带来的维护性提升是任何工具链优化都比不上的。这篇“React系列-1”作为整个系列的开篇我打算不急着写代码而是先把React的核心思维、和Vue的对比、生命周期、Fiber工作机制这些基础概念给你讲透。因为我在带新人的时候发现很多人上来就写组件、调hook最后写出了一堆“React写法的jQuery代码”——能用但完全没吃到React的红利。所以这个系列我会从底层逻辑开始一步一步带你建立正确的React心智模型。那这篇适合谁看准备入门React的应届生、被面试题折磨的求职者、以及写了React但总觉得哪里没学透的在职前端这篇都应该能帮到你。我会把网上那些碎片化教程里讲不清楚的东西用大白话给你捋一遍。2. React和Vue的区别别只背面试题要理解设计哲学的差异2.1 模板语法与JSX的本质差异“Vue和React的区别”是网上搜索量最高的React相关关键词之一也是面试必问的题。很多人背答案说“Vue用模板React用JSX”但这只是表面。本质上Vue把HTML当作一个可以增强的模板你在HTML里加指令、加插值框架替你去解析和编译这些模板语法React把JavaScript当作语言本体JSX只是JavaScript的语法糖它的编译过程就是把JSX的标签结构转换成React.createElement调用。这两个方向决定的差异是深远的。用Vue的时候你会觉得HTML是主语言JavaScript是辅助用React的时候你的所有能力都建立在“JavaScript有多强React就有多强”的基础上。比如在React里想要条件渲染直接写{condition Component /}这是JavaScript的短路求值在Vue里则要写v-if指令。从表达能力上来讲React的JSX更自由但也正因为自由新手容易写得乱七八糟Vue的模板有语法约束反而逼着你写出更规范的结构。我自己两个都用过我的感受是Vue上手快、模板结构清晰、中文文档友好适合中小团队快速开发React的曲线更陡峭但当你习惯了组件化的思考方式之后它的心智模型非常统一整个项目写下来不会有“这里该用指令、那里该用计算属性”这样的割裂感。2.2 响应式原理Vue的依赖追踪 vs React的主动渲染另一个核心差异是数据更新机制。Vue 3的响应式基于Proxy它会精确追踪数据的依赖关系数据变了只有依赖这条数据的组件会重新渲染这是细粒度的响应式。React则用的是主动渲染——不管数据怎么变的组件都会重新执行一遍render函数然后通过diff算法找出新旧虚拟DOM的差异把变更应用到真实DOM上。这两条路线各有优劣。Vue的细粒度追踪性能好、更新精确但在大型项目里追踪依赖本身也有开销而且如果嵌套层级过深要小心处理响应式丢失的问题。React的主动渲染思路简单粗暴数据变了我就全量算一遍反正有diff算法帮我找出差异。这种思路的优点是心智负担低——你不需要担心你的数据是不是“响应式”的普通变量、普通对象一切照常缺点是需要React自己去做优化比如我们常说的shouldComponentUpdate、memo、useMemo本质上都是为了让React“少做无用功”。我记得刚转React的时候做一个小功能数据更新了但页面不刷新Vue里第一反应是“我的数据没有声明为响应式的”React里第一反应是“我的组件是不是被React.memo包住了导致没触发更新”。两种解决问题的思路完全平行这一点是React和Vue新手最容易混淆的地方。2.3 Vue和React怎么选我的现实建议选型这个问题没有标准答案但我可以说几个实际场景。如果你公司有大量后端转前端的同事Vue的模板语言门槛更低如果你搞的是中后台系统、数据可视化大屏这类交互复杂、状态多的项目React的组件化模型和生态更友好如果你想转React Native做移动端那不用纠结直接学React。从就业市场上看国内一线互联网公司的中后台和大型前端项目React的占比依然很高。Vue在中小企业和外包项目里更常见。我的经验是别把时间花在纠结选型上两个都学先把一个学透另一个用三天就能上手。前端的基础相通核心的DOM操作、事件循环、异步编程这些通了框架就是工具。3. React的核心原理JSX、组件和生命周期3.1 JSX和虚拟DOM为什么你写的是JS不是HTMLJSX是React的门面但它经常被误解成“在JavaScript里写HTML”。严格来说JSX是React.createElement(component, props, ...children)的语法糖。你写的const element h1 classNamegreetingHello, world!/h1;编译之后其实是const element React.createElement( h1, { className: greeting }, Hello, world! );这个转换是由Babel或者其他编译工具完成的。为什么React不直接让你用createElement写因为那太繁琐了嵌套层级一多你写的代码会变成一坨难以阅读的函数调用。JSX的出现是为了让代码的可读性回到“写HTML模板”的顺滑程度同时保留JavaScript的全部表达能力。这里的核心概念是虚拟DOMVirtual DOM。每次数据变化React会先生成一个新的虚拟DOM树简单说就是描述界面结构的JavaScript对象然后和上一次的虚拟DOM树做对比diff算法找出差异最后才把差异更新到真实DOM上。真实DOM的操作代价高虚拟DOM之间的比较就是在内存里做JavaScript对象比较代价低得多。这套机制保证了React在大部分场景下的性能都不错同时让开发者不需要手动操作DOM。3.2 为什么React组件每次都返回一个render函数“react为什么每次都返回一个render函数”这个热词还挺有意思的。大家刚开始学React的时候都会疑惑为什么一个组件不直接写一个对象而是一个函数这个“每次返回”又是什么意思我的理解是这样的React组件的本质是一个“数据到UI的纯函数”。输入是props和state输出是虚拟DOM的描述。每次数据变化React都会重新调用这个函数得到一份最新的界面描述。它不会保留上一次的结果去“修改”而是“重新生成一份”。这就是为什么React要用render函数或者在函数组件里就是组件本身来承载渲染逻辑而且这个函数必须是纯粹的——不能有副作用不能直接改外部变量不能依赖会变化的外部状态。给出的同一份输入必然得到同一份输出。很多人写不好React就是因为这个“函数思维”没建立起来。比如有人会在render函数里直接做复杂的计算、发请求、改全局变量这些都是破坏纯函数性质的做法。正确姿势是渲染逻辑只负责把数据映射成UI副作用留给useEffect去处理。记住这一点React的水平至少上一个台阶。3.3 React生命周期从挂载到卸载的完整旅程React生命周期是面试题高频考点也是写React必须烂熟于心的内容。虽然函数组件时代官方推荐用useEffect来“模拟”生命周期但理解类组件的生命周期依然是理解React内部机制的一把钥匙。类组件的生命周期主要分三个阶段挂载阶段Mounting组件被创建并插入DOM。顺序是constructor→static getDerivedStateFromProps→render→componentDidMount。componentDidMount是你发请求、订阅事件、操作DOM的最佳时机因为它保证虚拟DOM已经渲染到真实DOM上了。更新阶段Updating组件的props或state发生变化时触发。顺序是static getDerivedStateFromProps→shouldComponentUpdate→render→getSnapshotBeforeUpdate→componentDidUpdate。这里有一个重要的优化点shouldComponentUpdate它返回false可以让React跳过这次渲染这就是性能优化的基础。卸载阶段Unmounting组件从DOM中移除调用componentDidUnmount。这里一定要清理你在componentDidMount里创建的东西定时器、事件监听器、请求的取消标记否则会内存泄漏。函数组件时代useEffect可以同时模拟挂载和卸载useEffect(() { // 挂载时执行相当于 componentDidMount const timer setInterval(() { /* ... */ }, 1000); // 返回的函数在卸载时执行相当于 componentWillUnmount return () clearInterval(timer); }, []);我在实战中发现很多刚转React hook的同学对useEffect的依赖数组理解不到位。依赖数组里放什么值就决定这个effect什么时候重新执行。空数组表示只在挂载时执行一次不传数组表示每次渲染都执行传入变量表示变量变化时执行。这个设计足够灵活但也容易踩坑——如果你在effect里用了某个外部变量但没写进依赖数组你就拿到了闭包里捕获的旧值这就是经典的“陈旧闭包”问题。4. Fiber架构React性能背后的秘密武器4.1 为什么React需要Fiber“fiber的作用”也是高频搜索词。简单说Fiber是React 16引入的底层架构重写它解决了一个核心问题当组件树很大、渲染耗时很长时旧版React的渲染是同步且不可中断的如果一次渲染需要30毫秒那么这30毫秒内主线程被占住页面会卡顿用户交互点击、输入得不到响应。古早的React版本渲染过程像是一口气跑完的长跑中间不能停。Fiber的厉害之处在于它把渲染工作拆成了一个个小任务单元Fiber节点这些任务可以分片执行执行一段看看有没有更紧急的事比如用户点击、动画帧如果有就把控制权交出去等主线程空闲再继续。这就是React的“并发模式”底层的支撑。生活化类比你要做一桌菜渲染整个页面以前必须先把所有菜全部做完再上桌同步渲染中间亲戚打电话来你也没空接用户交互被阻塞。Fiber的方式是把菜切成片炒完一片先装盘端上去然后趁空隙接个电话处理交互再回厨房继续炒。用户体验就好多了。4.2 Fiber如何实现可中断的渲染Fiber的核心数据结构是一个链表树。每个组件都对应一个Fiber节点这些节点通过链表指针连接React可以记录当前处理到哪个节点暂停后也能从暂停的地方恢复。配合requestIdleCallback这样的APIReact内部自己实现了调度器Fiber可以根据任务的优先级来调度执行顺序。在React 18里这个能力进一步通过startTransition、useDeferredValue等API开放给了开发者。你可以把非紧急的更新标记为transitionReact会在处理完紧急更新后利用空闲时间去处理这些低优先级任务。这个能力在数据量大的表格、复杂图表这类场景尤其有用。4.3 日常开发中怎么利用Fiber的优势大多数人不用深入Fiber源码但理解Fiber能帮你在写代码时做出更合理的决策。比如大型列表用React.memo包裹把状态提升或下放用useMemo缓存昂贵计算在React 18里用startTransition包裹非紧急更新。我自己的一个真实案例之前做一个物联网设备列表两百多个设备的实时数据每秒钟会推送很多条更新。如果不做任何优化整个列表每秒钟重新渲染两百多次页面卡成PPT。后来我用memo包裹列表项用useMemo缓存列表项的props比较再配合startTransition处理设备状态的更新页面瞬间流畅了。Fiber的调度机制加上合理的组件拆分和记忆化才是React性能优化的完整配方。5. React开发实战初始化、调试与常见报错排查5.1 从脚手架到第一个组件3分钟跑起来废话不多说咱们直接上手。现在官方推荐用Vite来创建React项目比老牌的Create React App快得多npm create vitelatest my-react-app -- --template react cd my-react-app npm install npm run dev这个命令会创建一个基于Vite的React项目。Vite的开发服务器启动速度很快而且支持热更新你在编辑器里改代码浏览器几乎瞬间刷新。安装依赖别用npm也可以用pnpm或者yarn看个人习惯我推荐pnpm它更省磁盘空间安装速度也快。跑起来之后你会看到默认的React页面。打开src/App.jsx把它改成你的第一个组件function App() { const [count, setCount] useState(0); return ( div h1我的第一个React组件/h1 p你已经点击了 {count} 次/p button onClick{() setCount(count 1)} 点我加一 /button /div ); } export default App;这个简单的例子已经展示了React最核心的两件事state状态和事件处理。useState返回一个状态值和一个更新函数你调用更新函数React会重新渲染组件。这就是React数据驱动UI的最小演示。5.2 报错排查实录minified React error #130搜索热词里有一条“dsh-better-sidebar: minified React error #130; visit https://reactjs.org/docs/error-decoder.html”这是React的“打包后错误”提示。React在生产环境下报错时错误信息会被压缩只显示一个错误码。这个错误码对应的完整信息需要去官方错误解码器里查询。Error #130对应的完整信息是“Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined”。这个报错的常见原因是你导入了一个不存在的组件或者组件循环引用了。比如你在另一个文件里写import { Sidebar } from ./Sidebar;但Sidebar.jsx的实际导出是export default Sidebar而不是命名导出export const Sidebar就会导致Sidebar为undefined渲染时报Error #130。解决方法是检查导入路径和导出方式是否匹配或者使用React.lazy懒加载时组件名拼写错误也会触发这个错误。我的排查思路是先去看错误码对应的完整信息然后检查所有被引用的组件是否都正确导出和导入。这个报错90%的情况都是导入导出不匹配不是什么高深的问题。5.3 React图表选型antd图表与其他方案对比热搜词里还有“react图表”我顺便聊聊这个。React生态里的图表库选择非常多我实际用过的有ant-design/charts、ECharts for Reactecharts-for-react、Recharts和Visx。库优点缺点适用场景ant-design/charts基于G2Plot图表类型丰富、文档中文、开箱即用包体积大、自定义复杂中后台管理系统的标准图表echarts-for-react底层ECharts性能强、图表类型最多、社区案例多需要自己处理option配置、样式定制成本高数据可视化大屏、复杂图表Recharts组件化写图表、代码可读性好、轻量图表类型相对少、性能大数据量时一般简单报表、仪表盘如果你做的是一个后台管理系统需要快速上线、图表类型常见我推荐ant-design/charts如果你做的是数据大屏对图表类型和性能要求高首选echarts-for-react如果图表只是页面里的点缀数据量不大Recharts就够了。5.4 React Native入门要点白屏与低端机卡顿最后提一下React Native因为热词里出现了“react native 启动白屏”和“react navite 在安卓低端机很卡”。React Native是React的移动端延伸它的核心思路是用JavaScript和React写UI最终渲染成原生组件。“启动白屏”是我见过最多的问题原因通常是JavaScript bundle加载太慢。首页框架已经加载了但JS逻辑没执行完界面就显示白屏。解决办法有几个方向用react-native-bundle-visualizer检查bundle大小做分包加载使用Suspense配合React.lazy做首页组件的懒加载在原生端做启动图占位让用户觉得应用已经加载了用Hermes引擎替代JavaScriptCore启动速度和内存占用都会改善。“安卓低端机很卡”的问题本质上和Web端是一样的渲染开销太大主线程被阻塞。React Native的优化思路包括列表用FlatList而不是ScrollViewFlatList会做窗口化渲染只渲染可视区域的Item减少不必要的setState用InteractionManager把非紧急任务放到交互完成后执行关键页面用原生模块实现比如一些复杂动画直接用Reanimated别让JS线程扛所有压力。6. 面试题、学习路径与离线文档React系列接下来的规划6.1 高频面试题本质解析React面经都在问什么搜索热词里“react面试题”和“react面经”占了大头。我帮人改简历、做模拟面试这些年发现React面试题翻来覆去就是那几类React的事件机制、setState是同步还是异步、虚拟DOM和diff算法、组件通信方式、Hooks原理、性能优化手段、React 18的新特性。这些问题看似独立但背后其实是一条主线React是怎么把数据变成界面然后保持数据和界面同步的。理解了这条主线你根本不需要背题。比如面试官问“setState到底是不是异步的”其实是要考你对React批量更新和Fiber调度的理解——在事件处理函数里React会批量收集多次setState然后一次性更新在setTimeout、Promise回调里React 18之前的版本是同步执行的React 18之后自动批量更新覆盖了这些场景。我在面试别人的时候最看重的不是他能不能背出所有生命周期函数而是能不能讲清楚一个具体的交互场景比如点击按钮加一在React内部到底经历了什么。这种从原理出发的回答才是React面经里的高分答案。6.2 新手最容易踩的坑我的避坑清单写React这几年我总结了一套新手必踩的坑先列出来几个组件内部不要直接修改statestate.items.push(newItem)然后setState是不生效的因为React比较的是引用你直接改了原对象React拿到的还是同一个引用认为没有变化。正确做法是用展开运算符创建新数组。key值不要用index列表渲染时key用index通常不会报错但当你对列表做增删排序时复用逻辑会出bug。用数据里唯一的ID。忘了清理副作用组件卸载后定时器还在跑setState一个已经卸载的组件React 18之前的版本会报警告之后版本也不该这么做。useEffect依赖数组写少了这是“陈旧闭包”的根源我的习惯是如果要用的变量太多干脆用useReducer把相关状态整合在一起。6.3 学习资源推荐React离线文档、教程与自测路径“react离线文档”这个热词说明有一部分人在内网环境或者网速受限的情况下需要本地阅读React文档。React官方文档其实是开源的你可以用git clone把官方仓库克隆下来然后用文档构建工具在本地跑起来。网上也有一些打包好的离线HTML版本下载解压就能看。从学习路径上讲我不建议一上来就死磕官方文档英文版对你可能有门槛更推荐这样的顺序先看基础教程把项目跑起来搞清楚组件、props、state的基本用法然后系统过一遍官方文档的核心概念章节接着做一两个小项目比如一个待办事项、一个数据看板在实践里巩固最后再深入原理看Fiber、diff、调度这些底层机制。这个“React系列-1”只是开篇后续我计划在这个系列里继续深入第2篇讲Hooks的底层实现和自定义Hook的实战技巧第3篇用完整案例拆解React性能优化的全过程第4篇讲React 18的并发特性和新API第5篇对比React Native和Web端的架构差异。如果你在学习过程中有什么想问的、想看的欢迎在评论区留言我会根据大家的反馈调整后续的内容方向。最后说点真心话我在教别人React的时候最常说的就是“别光学API要多问为什么”。React的API没几个翻来覆去就那些但底层的这些设计理念——函数式组件、单向数据流、Fiber调度——才是你真正区别于“会写React”和“懂React”的分水岭。把这层窗户纸捅破了后面学什么都是顺水推舟的事。