- 博客(51)
- 收藏
- 关注
RSS订阅
1原创 2022必会的前端手写面试题
面试题视频讲解（高效学习）：进入学习二、题目1. 防抖节流这也是一个经典题目了，首先要知道什么是防抖，什么是节流。 防抖： 在一段时间内，事件只会最后触发一次。 节流： 事件，按照一段时间的间隔来进行触发。 实在不懂的话，可以去这个大佬的Demo地址玩玩防抖节流DEMO // 防抖 function debounce(fn) { let timeout = null; return function () {
2022-05-01 12:43:35
425
原创 react源码解析12.状态更新流程
react源码解析12.状态更新流程视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.co
2022-04-14 06:25:58
201
原创 react源码解析11.生命周期调用顺序
react源码解析11.生命周期调用顺序视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2022-04-14 06:22:01
198
原创 react源码解析10.commit阶段
react源码解析10.commit阶段视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2022-04-13 06:25:39
128
原创 react源码解析9.diff算法
react源码解析9.diff算法视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.con
2022-04-13 06:22:18
172
原创 react源码解析8.render阶段
react源码解析8.render阶段视频讲解（高效学习）：进入学习render阶段的入口render阶段的主要工作是构建Fiber树和生成effectList，在第5章中我们知道了react入口的两种模式会进入performSyncWorkOnRoot或者performConcurrentWorkOnRoot，而这两个方法分别会调用workLoopSync或者workLoopConcurrent//ReactFiberWorkLoop.old.jsfunction workLoopSync()
2022-04-12 08:19:31
132
原创 eact源码解析7.Fiber架构
react源码解析7.Fiber架构视频讲解（高效学习）：进入学习Fiber的深度理解react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的时间都交给了js执行，并且js的执行时单线程。为此react16之后就有了scheduler进行时间片的调度，给每个task（工作单元）一定的时间，如果在这个时间内没执行完，也要交出执行权给浏览器进行绘制和重排，所以异步可中断的更新需要一定的数据结构在内存中来保存工作单元的信息，这个
2022-04-12 08:14:17
168
原创 react源码解析6.legacy模式和concurrent模式
react源码解析6.legacy模式和concurrent模式视频讲解（高效学习）：进入学习react启动的模式react有3种模式进入主体函数的入口，我们可以从 react官方文档 使用 Concurrent 模式（实验性）中对比三种模式：legacy 模式： ReactDOM.render(<App />, rootNode)。这是当前 React app 使用的方式。当前没有计划删除本模式，但是这个模式可能不支持这些新功能。blocking 模式： ReactDOM.crea
2022-02-14 09:19:31
339
原创 react源码解析3.react源码架构
react源码解析3.react源码架构视频讲解（高效学习）：进入学习这一章的目的是让我们认识一下react源码架构和各个模块。在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。react的核心可以用ui=fn(state)来表示，更详细可以用const state = reconcile(update);const UI = commit(state);上面的fn可以分为如下一个部分：
2022-02-10 08:10:36
275
原创 react源码解析2.react的设计理念
react源码解析2.react的设计理念视频讲解（高效学习）：进入学习异步可中断React15慢在哪里在讲这部分之前，需要讲是那些因素导致了react变慢，并且需要重构呢。React15之前的协调过程是同步的，也叫stack reconciler，又因为js的执行是单线程的，这就导致了在更新比较耗时的任务时，不能及时响应一些高优先级的任务，比如用户的输入，所以页面就会卡顿，这就是cpu的限制。解决方案如何解决这个问题呢，试想一下，如果我们在日常的开发中，在单线程的环境中，遇到了比较耗
2022-02-09 11:59:04
135
原创 react源码解析20.总结&面试题解答
react源码解析20.总结&面试题解答视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式
2022-01-13 08:15:15
194
原创 react源码解析19.手写迷你版react
react源码解析19.手写迷你版react视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式1
2022-01-13 08:05:41
55
原创 react源码解析18事件系统
react源码解析18事件系统视频讲解（高效学习）：进入学习从一个bug说起下面这个demo_13在react17和react16中有什么不同吗？代码也很简单，模拟一个modal框，点击显示出现，点击其他地方，相当于点击了mask，modal消失，因为react事件都是委托到上层，所以需要在handleClick阻止冒泡，这样点击显示的时候不会触发document上的事件回调，导致modal无法显示。但是在react16上发现这样做还是不行，需要调用e.nativeEvent.stopImmediat
2021-12-28 07:35:36
97
原创 react源码解析17.context
react源码解析17.context视频讲解（高效学习）：进入学习context流程图cursor/valueStackreact源码中存在一个valueStack和valueCursor用来记录context的历史信息和当前context，另外还有一个didPerformWorkStackCursor用来表示当前的context有没有变化//ReactFiberNewContext.new.jsconst valueCursor: StackCursor<mixed> = c
2021-12-28 07:27:55
86
原创 react源码解析16.concurrent模式
react源码解析16.concurrent模式视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式
2021-12-24 06:23:34
130
原创 react源码解析15.scheduler&Lane
react源码解析15.scheduler&Lane视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concur
2021-12-24 06:12:52
92
转载 react源码解析14.手写hooks
react源码解析14.手写hooks视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-16 12:17:34
94
原创 react源码解析13.hooks源码
react源码解析13.hooks源码视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-16 12:12:03
69
转载 react源码解析12.状态更新流程
react源码解析12.状态更新流程视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.co
2021-12-15 08:06:53
64
转载 react源码解析11.生命周期调用顺序
react源码解析11.生命周期调用顺序视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2021-12-15 08:01:10
63
原创 react源码解析10.commit阶段
react源码解析10.commit阶段视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2021-12-14 09:24:18
78
原创 react源码解析9.diff算法
react源码解析9.diff算法视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.con
2021-12-14 09:18:55
50
原创 react源码解析8.render阶段
react源码解析8.render阶段视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-13 08:57:26
89
原创 react源码解析7.Fiber架构
react源码解析7.Fiber架构视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.co
2021-12-13 08:03:13
65
转载 react源码解析6.legacy模式和concurrent模式
react源码解析6.legacy模式和concurrent模式视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.conc
2021-12-10 08:53:10
97
转载 react源码解析3.react源码架构
react源码解析3.react源码架构视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2021-12-10 08:44:01
77
转载 学习react源码 征服面试官
react源码解析2.react的设计理念视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17
2021-12-09 11:18:42
74
转载 熟悉react源码 惊艳面试官
react源码解析1.开篇介绍和面试题视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-09 11:08:40
160
原创 2.react心智模型(来来来,让大脑有react思维吧)
人人都能读懂的react源码解析(大厂高薪必备)2.react心智模型(来来来,让大脑有react思维吧)视频讲解 视频课程的目的是为了快速掌握react源码运行的过程和react中的scheduler、reconciler、renderer、fiber等，并且详细debug源码和分析，过程更清晰。视频讲解（高效学习）:点击学习课程结构:开篇(听说你还在艰难的啃react源码)react心智模型(来来来,让大脑有react思维吧)Fiber(我是在内存中的dom)从legacy或con
2021-12-09 08:32:35
104
原创 人人都能读懂的react源码解析(大厂高薪必备)
人人都能读懂的react源码解析(大厂高薪必备)1.开篇(听说你还在艰难的啃react源码) 本教程目标是打造一门严谨(严格遵循react17核心思想)、通俗易懂(提供大量流程图解，结合demo、视频教程)的react源码解析课程，争取做到最容易理解，学起来效率最高的教程。在视频教程中，会带着大家一步一步断点调试。学完本课程后，你对react的理解会上升一个档次，如果能把课程所有知识点都掌握，相信你对react源码的认知已经超过大多数的面试官了。视频讲解 视频讲解的目的是为了快速掌握react源
2021-12-09 08:06:11
3012
转载 react源码解析20.总结&第一章的面试题解答
react源码解析20.总结&第一章的面试题解答视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurre
2021-12-08 11:23:44
60
转载 react源码解析19.手写迷你版react
react源码解析19.手写迷你版react视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式1
2021-12-08 11:10:11
65
转载 react源码解析18事件系统
react源码解析18事件系统视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.conte
2021-12-07 08:11:59
85
转载 react源码解析17.context
react源码解析17.context视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-07 08:05:22
66
转载 react源码解析16.concurrent模式
react源码解析16.concurrent模式视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式
2021-12-06 10:49:01
145
转载 react源码解析15.scheduler&Lane
react源码解析15.scheduler&Lane视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concur
2021-12-06 09:06:41
94
转载 react源码解析14.手写hooks
react源码解析14.手写hooks视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-04 09:22:07
74
转载 react源码解析13.hooks源码
react源码解析13.hooks源码视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-04 09:11:04
65
转载 react源码解析12.状态更新流程
react源码解析12.状态更新流程视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.co
2021-12-03 08:43:35
89
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人