谈一下React 的Fiber架构和Hooks

最新推荐文章于 2025-05-12 08:00:30 发布
转载 最新推荐文章于 2025-05-12 08:00:30 发布 · 407 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://wx.kaikeba.com/vip_course/q4ood3qy29/fy3hc96x86?tenant=wx5046bc7413796142
文章标签：

#面试 #js #xhtml #html #编程语言

本文探讨了在前端开发中，React框架的重要性和在大厂面试中掌握React原理的重要性。文中列举了多个常见的React面试题，强调理解React底层工作原理对于解决复杂问题和优化性能的关键作用。推荐了一位前京东资深前端工程师的React源码学习资料包，包括手写mini-react和深度解读React源码，以提升开发者的技术实力和面试表现。

国内的前端领域，Vue 和 React 是最火的两个框架，要说岗位数量，Vue可能会更多一点。

但如果把公司范围缩小到大厂，或者把范围扩展到全球，那React无疑独占鳌头。

↑上图来自《2019年度JavaScript现状调查报告》↑

可以说，如果你想进大厂，必须搞定 React，并且是从原理层面搞定 React。

以下是我从阿里，字节，滴滴等大厂面经中摘取的React相关面试题：

React 的 diff 算法工作过程

React 中的 setState 是同步还是异步

React、Vue /Angular 的区别?（会根据你简历中写的技术栈来）

React 中各种组件复用的优劣势（mixin、render props、hoc、hook）

React 的 Fiber 架构

React 性能优化

React hooks 相关问题

React新的生命周期，为什么 getDrivedStatefromProps 是静态的？

可以很清楚地看到，以上大部分问题都是React 原理层面的问题。

面试官为什么要问这些问题？我会写业务不就行了？

【会用React】和【会用React且懂原理】的人，战斗力是不一样的。

随着业务复杂度的上升，你在开发中会遇到各种各样的问题，比如虽然没有出现bug，但是项目性能很差，这时候你会如何分析调整？

再举个例子，React 路由有3种渲染方式——render，children，component，到底用哪一个？用任何一个都可以吗？对项目来说哪个是最优的？

如果日常工作中只是调用API，不理解原理，那上面的问题你很难解决。

如何真正理解 React 原理？

阅读 React 源码是最直接有效的方式。

通过阅读源码，你不仅能在日常工作和面试中受益，还能从中吸收优秀的解决问题的思路以及培养“造轮子”的能力，还会学习到怎么写出规范又好维护的代码。

不过React源码量级很大，本身有很大的难度，很多人都因此被劝退。这里给大家推荐一个非常棒的React源码资料包，前京东资深前端工程师高老师带你手写 mini-react，深入解读React源码，你将能收获以下知识及能力：

现在只需0元，就可以获得《深度剖析React源码》资料包，手写mini-react，搞定大厂面试。

立刻扫码，0元获取

资料内容

讲师介绍

视频资料截图

立刻扫码，0元获取

《深度剖析React源码》资料包

手写mini-react，搞定大厂面试

YvetteLau
关注
手写React的Fiber架构，深入理解其原理
dennis_jiang的博客
06-23 1702
熟悉React的朋友都知道，React支持jsx语法，我们可以直接将HTML代码写到JS中间，然后渲染到页面上，我们写的HTML如果有更新的话，React还有虚拟DOM的对比，只更新变化的部分，而不重新渲染整个页面，大大提高渲染效率。到了16.x，React更是使用了一个被称为Fiber的架构，提升了用户体验，同时还引入了hooks等特性。那隐藏在React背后的原理是怎样的呢，Fiber和hooks又是怎么实现的呢？本文会从jsx入手，手写一个简易版的React，从而深入理解React的原理。 本文主要实
React Hooks 实现原理，实现一个简版React Hooks（闭包 Fiber 链表）
HZFEStudio的博客
10-30 608
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview 完整高频题库阅读地址：https://febook.hzfe.org/ 相关问题 React Hooks 是什么 React Hooks 是怎么实现的 使用 React Hooks 需要注意什么 回答关键点 闭包 Fiber 链表 Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hooks 主要是利用闭包来保
深度解析react中hooks的底层原理是啥？React架构fiber原理深度解析
为了WLB努力
03-13 2380
React Hooks 的底层原理是基于 React Fiber 架构的实现。React Fiber 是 React 的新的协调引擎，它的设计目标是等特性。Fiber 架构重新实现了 React 的调度算法，使得 React 可以更灵活地控制组件的渲染过程。我们都知道react框架的核心算法是diff算法的，其实 diff 算法的核心就是复用节点，通过一一对比也好，通过 map 查找也好，都是为了找到可复用的节点，移动过来。
React面试必问的Fiber和Hooks，一次解决
2401_84412194的博客
04-29 564
React 中的 setState 是同步还是异步React、Vue /Angular 的区别?（会根据你简历中写的技术栈来）React 中各种组件复用的优劣势（mixin、render props、hoc、hook）React 的 Fiber 架构React 性能优化React hooks 相关问题React新的生命周期，为什么 getDrivedStatefromProps 是静态的？可以很清楚地看到，以上大部分问题都是React 原理层面的问题。面试官为什么要问这些问题？
React三大难点一次说清：fiber、hook、任务调度和算法
前端达人
09-14 1019
你在啃React源码吗？是不是觉得无从下手，看了也觉得没收获到啥？没关系，你不是一个人。React源码量级实在是太大了，内部构成也非常复杂，不夸张的说，有些人第一次读源码还没开始就结束了—...
React 之 简易实现 Fiber架构
yuan_me_da的博客
03-20 1731
文章目录fiber架构是什么？它解决了什么问题？fiber 的核心思想，实现 fiber 我们需要做到什么？如何做？Fiber reconcileCommit 阶段实现useState管理状态更新 此篇文章是在学习一步一步实现fiber架构的同时，从另外一个由总到分的角度来总结fiber架构的实现思路。文章末尾有一些学习参考文章可以借鉴。 fiber架构是什么？它解决了什么问题？ 当我们项目过于复杂，渲染树过于庞大的时候，那么我们的递归渲染会耗时很长，而且很难被中断，fiber 的主要原理就是让我们在 di
React 底层 Fiber 架构 简单理解
xbczrz的博客
11-04 964
JS 是引擎是的；严格来说，JS 引擎和页面渲染引擎在同一渲染线程，两者。那么就会遇到这样的一种情况：当前面一个任务长期霸占CPU，后面啥事也干不了，浏览器卡死，造成极差的用户体验。
React中的Fiber更新机制如何执行的setState
weixin_42662753的博客
11-01 609
React中的Fiber更新机制如何执行的setState
React-Hook原理
JavaZwb的博客
09-19 684
React 16 引入了 Fiber 架构，会基于 ReactElement 生成唯一的 Fiber 对象。在更新阶段，会基于旧的 Fiber 链表创建一个新的 Fiber 链表(如下图)，可以复用旧的对象，并且获取旧 Hook 的状态。无论是初次挂载还是更新，每调用一次 Hook 函数，都会产生一个 Hook 对象与之对应，产生的 Hook 对象依次排列，形成链表存储到函数组件 Fiber.memoizedState 上。在这个过程中，有一个十分重要的指针：workInProgressHook
React Hooks 的实现必须依赖 Fiber 么？
Sharon0408的博客
04-20 280
作者：zxg_神说要有光原文链接：https://juejin.cn/post/7087172219226292237 React 的 hooks 是在 fiber 之后出现的特性，所以很多人误以为 hooks 是必须依赖 fiber 才能实现的，其实并不是，它们俩没啥必然联系。 现在，不止 react 中实现了 hooks，在 preact、react ssr、midway 等框架中也实现了这个特性，它们的实现就是不依赖 fiber 的。 我们分别来看一下这些不同框架中的 hooks 都是怎么实现的：
五分钟搞懂react 的Fiber以及ref hooks原理及Object.seal()
weixin_43464194的博客
05-21 1219
当然，创建这样的数据结构还是为了使用的，每种 hooks api 都有不同的使用这些 memorizedState 数据的逻辑，有的比较简单，比如 useRef、useCallback、useMemo，有的没那么简单，比如 useState、useEffect。后来就引入了 fiber 架构，它以链表的形式以循环来模拟递归组件树，而放弃了递归调用，因为循环可以随时被中断，可以灵活的暂停、继续和丢弃执行的任务（requestIdleCallback API来实现）。（更新差异的，渲染真实的dom）
关于 React Fiber 架构、Hooks 原理
weixin_42283818的博客
04-27 1208
在 React 16 版本之前，采用的是栈调和（Stack Reconciler），流程是 JSX 经过render函数转换为虚拟 DOM（VDOM），然后直接递归渲染 VDOM。这种方式一旦开始渲染就无法中断，若渲染任务复杂，会导致页面卡顿，影响用户体验。而 React 16 引入了 Fiber 架构，在 VDOM 和实际 DOM 渲染之间增加了一个协调（Reconcile）阶段。
React Hooks 实现原理深度解析：从基础到源码级理解
petertanjinjie的博客
05-12 1034
通过理解 Fiber 架构、Hook 的链表存储机制以及闭包问题，开发者可以更深入地掌握 Hooks 的底层原理，从而写出更高效、可维护的 React 代码。在 React 16.8 之前，开发者主要通过类组件（Class Component）构建应用。如果你有其他问题，欢迎在评论区交流！：通过高阶组件（HOC）或 Render Props 实现逻辑复用时，容易导致组件嵌套过深（“回调地狱”）。函数组件在 React 16.8 之前无法管理状态或副作用，导致其只能用于展示性组件，无法处理复杂业务逻辑。
react-hooks详解
热门推荐
月下lk山人的博客
05-24 2万+
1 关于hook 1.1 为什么使用hook 在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性。 以下是实现一个输入框，类组件和函数组件两种写法的对比： /** * @name 类组件 */ import React from 'react'; export default class Home extends React.Component
hooks原理解析
weryoung的博客
01-09 1089
React Hooks原理
React面试必问的Fiber和Hooks，一次解决，C#面试题及答案
2201_75604341的博客
04-18 601
第一天带大家手写一个mini-react ,带你深度掌握React中的虚拟dom节点，了解React组件的渲染原理，及函数组件与类组件实现的不同方式，深入了解jsx原理。还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。hooks是面试的重点，懂得原理也会对你日常业务有很大的帮助。的上升，你在开发中会遇到各种各样的问题，比如虽然没有出现bug，但是项目性能很差，这时候你会如何分析调整？
React 深度学习：ReactFiberHooks
weixin_33728268的博客
06-19 3267
path：packages/react-reconciler/src/ReactFiberHooks.js 类型定义 Dispatcher 分发器 export type Dispatcher = { readContext<T>( context: ReactContext<T>, observedBits: void | number | boo...
React hooks实战总结
大灰狼的小绵羊哥哥的博客
08-22 2130
React hooks实战总结 一、什么是hooks？ react 于19年2月份在16.8版本中新增了hook这一特性，已经过去了半年多了，社区的各种文章解析页汗牛充栋，本文将结合自己的项目实践，对 react hooks做一个全面的讲解，俗话说没吃过猪肉，还没见过猪跑吗？确实，可能大部分同学对hooks特性都有了自己的了解，但是在实际项目中使用又是另一回事了，实践出真知，这篇文章是自己对...
请你通俗易懂的说一下react的fiber架构
最新发布
07-05
<think>我们以通俗易懂的方式解释 React 的 Fiber 架构。 ### React Fiber 架构通俗解释 **背景**：在 React 16 之前，React 使用 Stack Reconciler（栈协调器），它采用递归方式处理虚拟 DOM 的更新。递归一旦开始就不能中断，如果组件树很大，更新过程会长时间占用主线程，导致用户交互（如输入、动画）卡顿。 **Fiber 架构的目标**： 1. **可中断更新**：将更新任务拆分成小任务，可以随时中断去执行高优先级任务（如用户输入）。 2. **任务优先级**：给不同更新任务分配优先级，高优先级任务（如动画）可以打断低优先级任务。 3. **并发渲染**：在后台准备新的视图，不阻塞主线程。 #### Fiber 是什么？ - **Fiber 是一个对象**：对应一个组件、它的输入（props）和输出（DOM 节点）。 - **Fiber 是一个执行单元**：React 将整个更新过程分解成多个 Fiber 任务。 - **Fiber 是一个链表结构**：React 使用链表结构连接各个 Fiber 节点，便于中断和恢复。 #### Fiber 架构核心原理 1. **任务拆分（Fiber 节点）**： - 将整个更新任务拆分成多个小任务，每个任务处理一个 Fiber 节点。 - 例如：一个组件树的更新被拆分成多个节点（div、span、Component 等）的更新任务。 2. **任务调度（Scheduler）**： - React 使用浏览器的 `requestIdleCallback` 或 `setTimeout` 在空闲时间执行任务。 - 高优先级任务（如用户点击）会打断低优先级任务（如从服务器加载数据）。 3. **双缓存技术**： - React 在内存中构建新的 Fiber 树（workInProgress tree），完成后直接替换当前树（current tree）。 - 这类似于游戏中的双缓冲，避免中间状态闪烁。 4. **链表遍历**： - Fiber 节点之间通过 `child`（第一个子节点）、`sibling`（下一个兄弟节点）、`return`（父节点）连接。 - 遍历顺序：深度优先遍历，但可以中断。 #### 工作流程示例 假设更新一个组件树： ``` App ├─ Header └─ Content └─ Article ``` 1. **开始更新**：从根节点开始，创建第一个 Fiber 任务（处理 App）。 2. **中断与恢复**： - 处理完 App 后，处理 Header。 - 此时如果用户点击按钮，React 暂停当前任务，优先处理按钮点击事件。 - 事件处理完后，恢复更新任务，继续处理 Content。 3. **提交更新**：整个更新完成后，一次性将新 DOM 提交到屏幕上（避免中间状态）。 #### 代码结构示例（简化 Fiber 对象） ```javascript // 一个 Fiber 节点的结构 const fiber = { tag: FunctionComponent, // 组件类型（函数组件/类组件/DOM节点） key: null, type: 'div', // 节点类型（如 div、MyComponent） stateNode: divDOM, // 对应的真实 DOM 节点 return: parentFiber, // 父节点 child: childFiber, // 第一个子节点 sibling: nextSibling, // 下一个兄弟节点 props: { children: [...] }, memoizedState: null, // Hook 链表（函数组件的状态） alternate: null, // 指向另一个树的对应节点（用于双缓存） // ... 其他属性 }; ``` #### Fiber 架构优势 - **流畅的用户体验**：高优先级任务快速响应，避免卡顿。 - **增量渲染**：将渲染任务分散到多个帧中。 - **错误边界**：在组件树中捕获错误，避免整个应用崩溃。 #### 实际更新过程 1. **Render 阶段**：构建 Fiber 树（可中断，异步执行）。 - 执行组件渲染，计算变更（Diffing）。 - 生成副作用列表（如需要插入、更新、删除的节点）。 2. **Commit 阶段**：应用变更到 DOM（不可中断，同步执行）。 - 执行生命周期方法（如 `componentDidMount`）。 - 更新 DOM。 ### 总结 React Fiber 就像是一个“智能任务管理器”： - 把大任务拆成小任务（Fiber 节点）。 - 根据优先级安排任务（用户交互 > 动画 > 数据加载）。 - 在空闲时间执行任务，避免阻塞主线程。 §§相关问题§§: 1. React Fiber 架构如何实现任务中断和恢复？ 2. 在 Fiber 架构中，React 是如何进行 Diffing 算法的？ 3. React Hooks 在 Fiber 架构中是如何工作的？ 4. 如何理解 Fiber 架构中的双缓存技术？</think>### React Fiber 架构通俗解释 想象你在厨房同时做多道菜（煮汤、煎牛排、拌沙拉）。传统方式你会按顺序完成每道菜（煮完汤再煎牛排），但这样效率低且容易糊锅。Fiber 架构就像请了个智能助手，它帮你： 1. **把任务拆成小步骤**（切菜、煮水、翻面） 2. **灵活安排顺序**（水烧开时去翻牛排） 3. **优先处理紧急任务**（锅要烧干了立刻处理） #### Fiber 核心原理图解 ```mermaid graph LR A[组件树] --> B[传统递归更新] A --> C[Fiber架构] B --> D[不可中断<br>长任务阻塞] C --> E[可中断链表遍历] E --> F[优先级调度] F --> G[高优先级任务插队] G --> H[流畅的用户体验] ``` #### 关键概念通俗版 1. **Fiber 是什么**： - 每个组件对应一个 Fiber 对象（类似任务卡片） - 包含：组件类型、props、state、要做的操作 - 示例 Fiber 对象： ```javascript { type: 'button', // 组件类型 props: { onClick: ... }, // 属性 stateNode: DOM节点, // 对应的真实DOM child: 第一个子组件, // 子任务指针 sibling: 下一个兄弟组件, // 同级任务指针 return: 父组件, // 返回上级指针 effectTag: 'UPDATE' // 要执行的操作 } ``` 2. **链表结构**： - 把组件树变成链表（像任务清单） - 遍历顺序：孩子 → 兄弟 → 返回（深度优先） ```mermaid graph TD A[App] --> B[Header] A --> C[Content] C --> D[Article] C --> E[Sidebar] %% 链表连接方式 A -->|child| B B -->|sibling| C C -->|child| D D -->|sibling| E E -->|return| C ``` 3. **可中断原理**： - 浏览器每帧留出 5ms 给 React - 时间用尽就暂停，下个空闲时段继续 ```javascript function workLoop() { while (有空闲时间 && 下一个Fiber任务) { 执行当前Fiber任务() 移动到下一个Fiber() } if (还有任务) requestIdleCallback(workLoop) // 下次空闲继续 } ``` 4. **优先级系统**： - 给任务贴紧急标签： ```typescript const Priority = { Immediate: 99, // 用户输入 High: 98, // 动画 Normal: 97, // 数据更新 Low: 96 // 预加载 } ``` - 煎牛排时手机响了（高优先级）→ 先接电话再翻面 #### 实际工作流程 1. **收到更新请求**（用户点击按钮） 2. **创建更新任务**（生成新 Fiber 树） 3. **开始调度**： ```javascript // 伪代码流程 function scheduleUpdate() { if (是紧急更新) { 立即执行() } else { 放入任务队列() requestIdleCallback(处理任务) // 空闲时处理 } } ``` 4. **增量构建**（每次处理几个 Fiber 节点） 5. **提交结果**（所有变更一次性更新到 DOM） #### 为什么需要 Fiber？ 传统更新方式的问题： ```mermaid graph LR A[setState] --> B[递归更新] B --> C[占用主线程] C --> D[动画卡顿] C --> E[输入延迟] ``` Fiber 解决方案： ```mermaid graph LR A[setState] --> B[拆分成小任务] B --> C[空闲时执行] C --> D[高优先级插队] D --> E[流畅交互] ``` #### 代码示例（简化版 Fiber 遍历） ```javascript function performUnitOfWork(fiber) { // 1. 执行当前组件工作（如渲染、计算变更） const children = renderComponent(fiber); // 2. 构建子节点链表 reconcileChildren(fiber, children); // 3. 返回下一个工作单元 if (fiber.child) return fiber.child; // 优先处理子节点 let nextFiber = fiber; while (nextFiber) { if (nextFiber.sibling) return nextFiber.sibling; // 处理兄弟节点 nextFiber = nextFiber.return; // 回溯到父节点 } } // 调度器核心 function workLoop(deadline) { while (下一个任务 && deadline.timeRemaining() > 0) { 下一个任务 = performUnitOfWork(当前任务); } if (下一个任务) requestIdleCallback(workLoop); } ``` ### Fiber 带来的优势 1. **流畅交互**：优先处理用户操作（输入/点击） 2. **增量渲染**：大组件树不卡界面 3. **错误隔离**：单个组件崩溃不影响整个应用 4. **并发准备**：后台预渲染不可见内容 > 就像餐厅后厨：Fiber 是智能调度员，让厨师（浏览器）先做急单（用户点击），再做团餐（数据更新），同时准备明天的食材（预加载）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值