- 博客(60)
- 收藏
- 关注
RSS订阅原创 react源码解析16.concurrent模式
Fiber为concurrent架构提供了数据层面的支持。Scheduler为concurrent实现时间片调度提供了保障。Lane模型为concurrent提供了更新的策略上层实现了batchedUpdates和Suspense。
2023-03-15 08:49:07
114
1
原创 react源码解析15.scheduler&Lane
在调度优先级的过程中，会调用markStarvedLanesAsExpired遍历pendingLanes（未执行的任务包含的lane），如果没过期时间就计算一个过期时间，如果过期了就加入root.expiredLanes中，然后在下次调用getNextLane函数的时候会优先返回expiredLanes//遍历lanes const index = pickArbitraryLaneIndex(lanes);
2023-03-15 08:47:18
136
原创 react源码解析11.生命周期调用顺序
其中红色的部分不建议使用，需要注意的是commit阶段生命周期在mutation各个子阶段的执行顺序，可以复习上一章。
2023-02-28 09:06:18
120
原创 react源码解析12.状态更新流程
例如B节点触发更新，B节点被被标记为normal的update，也就是图中的u1，然后向上遍历到根节点，在根节点上打上一个normal的update，如果此时B节点又触发了一个userBlocking的Update，同样会向上遍历到根节点，在根节点上打上一个userBlocking的update。优先级是由Scheduler来调度的，这里我们只关心状态计算时的优先级排序，也就是在函数processUpdateQueue中发生的计算，例如初始时有c1-c4四个update，其中c1和c3为高优先级。
2023-02-28 09:04:01
142
原创 react源码解析1.开篇介绍和面试题
首先，我们可以从函数调用栈入手，理清react的各个模块的功能和它们调用的顺序，盖房子一样，先搭好架子，对源码有个整体的认识，然后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。react的纯粹体现在它的api上，一切都是围绕setState状态更新进行的，但是内部的逻辑却经历了很大的重构和变化，而且代码量也不小，如果只是从源码文件和函数来阅读，那会很难以理解react的渲染流程。熟悉react源码并不是一朝一夕的事，想精进自己的技术，必须花时间才行。
2023-02-27 10:58:15
250
原创 react源码解析10.commit阶段
在源码中commitBeforeMutationEffectOnFiber对应的函数是commitBeforeMutationLifeCycles在该函数中会调用getSnapshotBeforeUpdate，现在我们知道了getSnapshotBeforeUpdate是在mutation阶段中的commitBeforeMutationEffect函数中执行的，而commit阶段是同步的，所以getSnapshotBeforeUpdate也同步执行。根据effectTag执行对应的dom操作。
2023-02-27 10:55:30
312
原创 面试官：说说react的渲染过程
不管是在首次渲染还是更新状态的时候，这些渲染的任务都会经过Scheduler的调度，Scheduler会根据任务的优先级来决定将哪些任务优先进入render阶段，比如用户触发的更新优先级非常高，如果当前正在进行一个比较耗时的任务，则这个任务就会被用户触发的更新打断，在Scheduler中初始化任务的时候会计算一个过期时间，不同类型的任务过期时间不同，优先级越高的任务，过期时间越短，优先级越低的任务，过期时间越长。Scheduler（调度器）： 排序优先级，让优先级高的任务先进行reconcile。
2023-02-21 11:38:49
377
原创 面试官：说说你对react生命周期的理解
生命周期在各个阶段是怎样执行的，在面试的过程中有没有遇到这个问题呢，大家也可以学习往期。生命周期就是穿插在这些子阶段中执行的，来看一张图。源码体系文章哦，往期文章目录在文章结尾。源码介绍中，我们可以将应用的渲染过程分为。hello，这里是潇晨，今天我们来看下。其中红色的部分不建议使用，需要注意的是。各个子阶段的执行顺序，可以复习上一章。阶段，都会经历两个子阶段，一个是。阶段（应用状态更新），无论在。阶段的整体流程呢，这是因为。接下来根据一个例子来讲解在。阶段（应用首次渲染）和。
2023-02-21 11:37:24
278
原创 面试官：你是怎样理解Fiber的
这就是react所要做的事情了，react创新的提出了jsx，声明式地描述页面呈现的效果，jsx会被babel经过ast解析成React.createElement，而React.createElement函数执行之后就是jsx对象或者说是virtual-dom。
2023-02-20 12:46:17
442
原创 面试官：react中的setState是同步的还是异步的
legacy模式下：命中batchedUpdates时是异步 未命中batchedUpdates时是同步的concurrent模式下：都是异步的。
2023-02-19 14:35:00
298
原创 好好学react源码然后惊艳所有人
hello，这里是潇晨，今天我们来聊聊react源码，作为使用react多年的前端工程师，我们是否还在使用着各种应用层面的库、框架呢，是否在面试过程中遇到一些关于react源码方面的问题呢，如果是，那么是否尝试过去看看react底层运行逻辑呢？
2023-02-14 13:23:45
297
原创 来来来，手摸手写一个hook
在看这部分前，先来捋清楚fiberhookupdateDispatcherDispatcher在源码中就是一个对象，上面存放着各种各样的hooks，在mount和update的时候会使用过不同的Dispatcher，来看看在源码中Dispatcher是什么样子：在调用useState之后，会调用一个的函数，这个函数调用之后会返回一个dispatcher对象，这个对象上就有useState等钩子。那我们来看看这个函数做了啥事情，这个函数比较简单，直接从对象上拿到current，然后返回出来的这个。
2023-02-14 13:23:18
237
原创 react源码解析9.diff算法
在render阶段更新Fiber节点时，我们会调用reconcileChildFibers对比current Fiber和jsx对象构建workInProgress Fiber，这里current Fiber是指当前dom对应的fiber树，jsx是class组件render方法或者函数组件的返回值。在reconcileChildFibers中会根据newChild的类型来进入单节点的diff或者多节点diff。
2023-02-13 11:52:51
50
原创 react源码解析6.legacy模式和concurrent模式
concurrent Mode是react未来的模式，它用时间片调度实现了异步可中断的任务，根据设备性能的不同，时间片的长度也不一样，在每个时间片中，如果任务到了过期时间，就会主动让出线程给高优先级的任务。legacy模式是我们常用的，它构建dom的过程是同步的，所以在render的reconciler中，如果diff的过程特别耗时，那么导致的结果就是js一直阻塞高优先级的任务(例如用户的点击事件)，表现为页面的卡顿，无法响应。legacy 模式在合成事件中有自动批处理的功能，但仅限于一个浏览器任务。
2023-02-07 10:10:55
298
原创 react源码解析7.Fiber架构
fiberRoot：指整个应用的根节点，只存在一个。我们现在知道了存在current Fiber和workInProgress Fiber两颗Fiber树，Fiber双缓存指的就是，在经过reconcile（diff）形成了新的workInProgress Fiber然后将workInProgress Fiber切换成current Fiber应用到真实dom中，存在双Fiber的好处是在内存中形成视图的描述，在最后应用到dom中，减少了对dom的操作。fiberRoot：指整个应用的根节点，只存在一个。
2023-02-07 10:10:14
266
原创 react源码解析5.jsx&核心api
virtual Dom是一种编程方式，它以对象的形式保存在内存中，它描述了我们dom的必要信息，并且用类似react-dom等模块与真实dom同步，这一过程也叫协调(reconciler)，这种方式可以声明式的渲染相应的ui状态，让我们从dom操作中解放出来，在react中是以fiber树的形式存放组件树的相关信息，在更新时可以增量渲染相关dom，所以fiber也是virtual Dom实现的一部分，其实virtual Dom只是在更新的时候快，在应用初始的时候不一定快。，这就是为什么jsx文件要声明。
2023-02-06 10:59:31
376
原创 react源码解析4.源码目录结构和调试
方法一：可以用现成的包含本课程所有demo的项目来调试，建议使用已经构建好的项目，地址：https://github.com/xiaochen1024/react_code_build。build源码：npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE。react：核心Api如：React.createElement、React.Component都在这。react-native-renderer：原生相关。
2023-02-06 10:59:12
449
原创 react源码解析3.react源码架构
这一章的目的是让我们认识一下react源码架构和各个模块。在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。react的核心可以用ui=fn(state)来表示，更详细可以用。
2023-01-10 14:13:00
169
原创 react源码解析19.手写迷你版react
第二步：创建dom节点函数。第一步：渲染器和入口函数。第四步：render阶段。第五步：commit阶段。第三步：更新节点函数。
2023-01-09 08:40:22
41
原创 react源码解析2.react的设计理念
Scheduler：有了Fiber，我们就需要用浏览器的时间片异步执行这些Fiber的工作单元，我们知道浏览器有一个api叫做requestIdleCallback，它可以在浏览器空闲的时候执行一些任务，我们用这个api执行react的更新，让高优先级的任务优先响应不就可以了吗，但事实是requestIdleCallback存在着浏览器的兼容性和触发不稳定的问题，所以我们需要用js实现一套时间片运行的机制，在react中这部分叫做scheduler。但是这些语法毕竟是虚构的，但是请看下下面的代码。
2023-01-09 08:39:57
38
原创 react源码解析18事件系统
代码也很简单，模拟一个modal框，点击显示出现，点击其他地方，相当于点击了mask，modal消失，因为react事件都是委托到上层，所以需要在handleClick阻止冒泡，这样点击显示的时候不会触发document上的事件回调，导致modal无法显示。究其原因就是react16和17在委托事件的容器上做出了改变，react16的事件会冒泡的document上，而17则会冒泡到root容器上，也就是ReactDom.render的第二个参数。
2023-01-06 07:58:17
101
原创 react源码解析17.context
为什么会有这样一个机制呢，因为我们的context是跨层级的，在之前讲到render阶段和commit阶段的时候，我们会以深度优先遍历的方式遍历节点，如果涉及跨层级读取状态就有点力不从心了，就需要一层一层往下传递我们的props，所以我们可以用一个stack记录我们的context，在render阶段pushProvider，在commit阶段popProvider，在每个具体的层级能根据valueCursor取当前value。pushProvider：将当前context加入valueStack。
2023-01-06 07:57:52
27
原创 react源码解析15.scheduler&Lane
在调度优先级的过程中，会调用markStarvedLanesAsExpired遍历pendingLanes（未执行的任务包含的lane），如果没过期时间就计算一个过期时间，如果过期了就加入root.expiredLanes中，然后在下次调用getNextLane函数的时候会优先返回expiredLanes//遍历lanes const index = pickArbitraryLaneIndex(lanes);
2023-01-05 09:16:01
49
原创 react源码解析16.concurrent模式
Fiber为concurrent架构提供了数据层面的支持。Scheduler为concurrent实现时间片调度提供了保障。Lane模型为concurrent提供了更新的策略上层实现了batchedUpdates和Suspense。
2023-01-05 09:14:59
86
原创 react源码解析13.hooks源码
在第9章commit阶段的commitLayoutEffects函数中会调用schedulePassiveEffects，将useEffect的销毁和回调函数push到pendingPassiveHookEffectsUnmount和pendingPassiveHookEffectsMount中，然后在mutation之后调用flushPassiveEffects依次执行上次render的销毁函数回调和本次render 的回调函数。update时会根据hook中的update计算新的state。
2023-01-04 11:48:10
57
1
原创 react源码解析11.生命周期调用顺序
其中红色的部分不建议使用，需要注意的是commit阶段生命周期在mutation各个子阶段的执行顺序，可以复习上一章。
2023-01-03 11:02:19
46
原创 react源码解析12.状态更新流程
例如B节点触发更新，B节点被被标记为normal的update，也就是图中的u1，然后向上遍历到根节点，在根节点上打上一个normal的update，如果此时B节点又触发了一个userBlocking的Update，同样会向上遍历到根节点，在根节点上打上一个userBlocking的update。优先级是由Scheduler来调度的，这里我们只关心状态计算时的优先级排序，也就是在函数processUpdateQueue中发生的计算，例如初始时有c1-c4四个update，其中c1和c3为高优先级。
2023-01-03 11:01:20
84
原创 react源码解析1.开篇介绍和面试题
首先，我们可以从函数调用栈入手，理清react的各个模块的功能和它们调用的顺序，盖房子一样，先搭好架子，对源码有个整体的认识，然后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。react的纯粹体现在它的api上，一切都是围绕setState状态更新进行的，但是内部的逻辑却经历了很大的重构和变化，而且代码量也不小，如果只是从源码文件和函数来阅读，那会很难以理解react的渲染流程。熟悉react源码并不是一朝一夕的事，想精进自己的技术，必须花时间才行。
2023-01-02 12:15:15
58
原创 react源码解析10.commit阶段
在源码中commitBeforeMutationEffectOnFiber对应的函数是commitBeforeMutationLifeCycles在该函数中会调用getSnapshotBeforeUpdate，现在我们知道了getSnapshotBeforeUpdate是在mutation阶段中的commitBeforeMutationEffect函数中执行的，而commit阶段是同步的，所以getSnapshotBeforeUpdate也同步执行。根据effectTag执行对应的dom操作。
2023-01-02 12:15:07
40
原创 面试官：说说react的渲染过程
不管是在首次渲染还是更新状态的时候，这些渲染的任务都会经过Scheduler的调度，Scheduler会根据任务的优先级来决定将哪些任务优先进入render阶段，比如用户触发的更新优先级非常高，如果当前正在进行一个比较耗时的任务，则这个任务就会被用户触发的更新打断，在Scheduler中初始化任务的时候会计算一个过期时间，不同类型的任务过期时间不同，优先级越高的任务，过期时间越短，优先级越低的任务，过期时间越长。Scheduler（调度器）： 排序优先级，让优先级高的任务先进行reconcile。
2022-12-20 09:06:47
1211
1
原创 面试官：说说你对react生命周期的理解
生命周期在各个阶段是怎样执行的，在面试的过程中有没有遇到这个问题呢，大家也可以学习往期。阶段，如果返现有节点的变化，例如上图的c2，那就标记这个节点。阶段，也就是深度优先遍历向上冒泡的时候依次执行节点的。生命周期就是穿插在这些子阶段中执行的，来看一张图。其中红色的部分不建议使用，需要注意的是。时：首先会按照深度优先的方式，依次构建。各个子阶段的执行顺序，可以复习上一章。阶段，都会经历两个子阶段，一个是。阶段的整体流程呢，这是因为。阶段会依次执行各个节点的。树，在构建的过程中会。阶段会依次执行节点的。
2022-12-20 09:05:52
54
原创 面试官：你是怎样理解Fiber的
这就是react所要做的事情了，react创新的提出了jsx，声明式地描述页面呈现的效果，jsx会被babel经过ast解析成React.createElement，而React.createElement函数执行之后就是jsx对象或者说是virtual-dom。
2022-12-19 09:55:08
179
原创 面试官：react中的setState是同步的还是异步的
legacy模式下：命中batchedUpdates时是异步 未命中batchedUpdates时是同步的concurrent模式下：都是异步的。
2022-12-16 08:10:16
84
原创 好好学react源码然后惊艳所有人
hello，这里是潇晨，今天我们来聊聊react源码，作为使用react多年的前端工程师，我们是否还在使用着各种应用层面的库、框架呢，是否在面试过程中遇到一些关于react源码方面的问题呢，如果是，那么是否尝试过去看看react底层运行逻辑呢？
2022-12-15 09:36:53
62
原创 来来来，手摸手写一个hook
在看这部分前，先来捋清楚fiber、hook、updateDispatcherDispatcher在源码中就是一个对象，上面存放着各种各样的hooks，在mount和update的时候会使用过不同的Dispatcher，来看看在源码中Dispatcher是什么样子：在调用useState之后，会调用一个的函数，这个函数调用之后会返回一个dispatcher对象，这个对象上就有useState等钩子。那我们来看看这个函数做了啥事情，这个函数比较简单，直接从对象上拿到current，然后返回出来的这个。
2022-12-15 09:36:34
65
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人