<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[js_2028的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/js_2028</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; js_2028]]></copyright><item><title><![CDATA[react源码解析16.concurrent模式]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129544445</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129544445</guid><author>js_2028</author><pubDate>Wed, 15 Mar 2023 08:49:07 +0800</pubDate><description><![CDATA[Fiber为concurrent架构提供了数据层面的支持。Scheduler为concurrent实现时间片调度提供了保障。Lane模型为concurrent提供了更新的策略上层实现了batchedUpdates和Suspense。]]></description><category></category></item><item><title><![CDATA[react源码解析15.scheduler&Lane]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129544425</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129544425</guid><author>js_2028</author><pubDate>Wed, 15 Mar 2023 08:47:18 +0800</pubDate><description><![CDATA[​    在调度优先级的过程中，会调用markStarvedLanesAsExpired遍历pendingLanes（未执行的任务包含的lane），如果没过期时间就计算一个过期时间，如果过期了就加入root.expiredLanes中，然后在下次调用getNextLane函数的时候会优先返回expiredLanes//遍历lanes const index = pickArbitraryLaneIndex(lanes);]]></description><category></category></item><item><title><![CDATA[react源码解析14.手写hooks]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129279874</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129279874</guid><author>js_2028</author><pubDate>Wed, 01 Mar 2023 13:55:28 +0800</pubDate><description><![CDATA[手写hooks最关键的是要理解hook队列和update队列的指针指向和updateQueue的更新计算。]]></description><category></category></item><item><title><![CDATA[react源码解析11.生命周期调用顺序]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129254324</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129254324</guid><author>js_2028</author><pubDate>Tue, 28 Feb 2023 09:06:18 +0800</pubDate><description><![CDATA[其中红色的部分不建议使用，需要注意的是commit阶段生命周期在mutation各个子阶段的执行顺序，可以复习上一章。]]></description><category></category></item><item><title><![CDATA[react源码解析12.状态更新流程]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129254350</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129254350</guid><author>js_2028</author><pubDate>Tue, 28 Feb 2023 09:04:01 +0800</pubDate><description><![CDATA[例如B节点触发更新，B节点被被标记为normal的update，也就是图中的u1，然后向上遍历到根节点，在根节点上打上一个normal的update，如果此时B节点又触发了一个userBlocking的Update，同样会向上遍历到根节点，在根节点上打上一个userBlocking的update。优先级是由Scheduler来调度的，这里我们只关心状态计算时的优先级排序，也就是在函数processUpdateQueue中发生的计算，例如初始时有c1-c4四个update，其中c1和c3为高优先级。]]></description><category></category></item><item><title><![CDATA[react源码解析1.开篇介绍和面试题]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129237547</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129237547</guid><author>js_2028</author><pubDate>Mon, 27 Feb 2023 10:58:15 +0800</pubDate><description><![CDATA[首先，我们可以从函数调用栈入手，理清react的各个模块的功能和它们调用的顺序，盖房子一样，先搭好架子，对源码有个整体的认识，然后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。react的纯粹体现在它的api上，一切都是围绕setState状态更新进行的，但是内部的逻辑却经历了很大的重构和变化，而且代码量也不小，如果只是从源码文件和函数来阅读，那会很难以理解react的渲染流程。熟悉react源码并不是一朝一夕的事，想精进自己的技术，必须花时间才行。]]></description><category></category></item><item><title><![CDATA[react源码解析10.commit阶段]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129237591</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129237591</guid><author>js_2028</author><pubDate>Mon, 27 Feb 2023 10:55:30 +0800</pubDate><description><![CDATA[在源码中commitBeforeMutationEffectOnFiber对应的函数是commitBeforeMutationLifeCycles在该函数中会调用getSnapshotBeforeUpdate，现在我们知道了getSnapshotBeforeUpdate是在mutation阶段中的commitBeforeMutationEffect函数中执行的，而commit阶段是同步的，所以getSnapshotBeforeUpdate也同步执行。根据effectTag执行对应的dom操作。]]></description><category></category></item><item><title><![CDATA[面试官：说说react的渲染过程]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129139652</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129139652</guid><author>js_2028</author><pubDate>Tue, 21 Feb 2023 11:38:49 +0800</pubDate><description><![CDATA[不管是在首次渲染还是更新状态的时候，这些渲染的任务都会经过Scheduler的调度，Scheduler会根据任务的优先级来决定将哪些任务优先进入render阶段，比如用户触发的更新优先级非常高，如果当前正在进行一个比较耗时的任务，则这个任务就会被用户触发的更新打断，在Scheduler中初始化任务的时候会计算一个过期时间，不同类型的任务过期时间不同，优先级越高的任务，过期时间越短，优先级越低的任务，过期时间越长。Scheduler（调度器）： 排序优先级，让优先级高的任务先进行reconcile。]]></description><category></category></item><item><title><![CDATA[面试官：说说你对react生命周期的理解]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129139709</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129139709</guid><author>js_2028</author><pubDate>Tue, 21 Feb 2023 11:37:24 +0800</pubDate><description><![CDATA[生命周期在各个阶段是怎样执行的，在面试的过程中有没有遇到这个问题呢，大家也可以学习往期。生命周期就是穿插在这些子阶段中执行的，来看一张图。源码体系文章哦，往期文章目录在文章结尾。源码介绍中，我们可以将应用的渲染过程分为。hello，这里是潇晨，今天我们来看下。其中红色的部分不建议使用，需要注意的是。各个子阶段的执行顺序，可以复习上一章。阶段，都会经历两个子阶段，一个是。阶段（应用状态更新），无论在。阶段的整体流程呢，这是因为。接下来根据一个例子来讲解在。阶段（应用首次渲染）和。]]></description><category></category></item><item><title><![CDATA[面试官：你是怎样理解Fiber的]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129121978</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129121978</guid><author>js_2028</author><pubDate>Mon, 20 Feb 2023 12:46:17 +0800</pubDate><description><![CDATA[这就是react所要做的事情了，react创新的提出了jsx，声明式地描述页面呈现的效果，jsx会被babel经过ast解析成React.createElement，而React.createElement函数执行之后就是jsx对象或者说是virtual-dom。]]></description><category></category></item><item><title><![CDATA[面试官：react中的setState是同步的还是异步的]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129110396</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129110396</guid><author>js_2028</author><pubDate>Sun, 19 Feb 2023 14:35:00 +0800</pubDate><description><![CDATA[legacy模式下：命中batchedUpdates时是异步 未命中batchedUpdates时是同步的concurrent模式下：都是异步的。]]></description><category></category></item><item><title><![CDATA[老大react说：schedule，我们今年的小目标是一个亿]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129110379</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129110379</guid><author>js_2028</author><pubDate>Sun, 19 Feb 2023 14:33:56 +0800</pubDate><description><![CDATA[hello，这里是潇晨，今天来讲个故事。]]></description><category></category></item><item><title><![CDATA[好好学react源码然后惊艳所有人]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129025069</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129025069</guid><author>js_2028</author><pubDate>Tue, 14 Feb 2023 13:23:45 +0800</pubDate><description><![CDATA[hello，这里是潇晨，今天我们来聊聊react源码，作为使用react多年的前端工程师，我们是否还在使用着各种应用层面的库、框架呢，是否在面试过程中遇到一些关于react源码方面的问题呢，如果是，那么是否尝试过去看看react底层运行逻辑呢？]]></description><category></category></item><item><title><![CDATA[来来来，手摸手写一个hook]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129025091</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129025091</guid><author>js_2028</author><pubDate>Tue, 14 Feb 2023 13:23:18 +0800</pubDate><description><![CDATA[在看这部分前，先来捋清楚fiberhookupdateDispatcherDispatcher在源码中就是一个对象，上面存放着各种各样的hooks，在mount和update的时候会使用过不同的Dispatcher，来看看在源码中Dispatcher是什么样子：在调用useState之后，会调用一个的函数，这个函数调用之后会返回一个dispatcher对象，这个对象上就有useState等钩子。那我们来看看这个函数做了啥事情，这个函数比较简单，直接从对象上拿到current，然后返回出来的这个。]]></description><category></category></item><item><title><![CDATA[react源码解析9.diff算法]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/129006544</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/129006544</guid><author>js_2028</author><pubDate>Mon, 13 Feb 2023 11:52:51 +0800</pubDate><description><![CDATA[在render阶段更新Fiber节点时，我们会调用reconcileChildFibers对比current Fiber和jsx对象构建workInProgress Fiber，这里current Fiber是指当前dom对应的fiber树，jsx是class组件render方法或者函数组件的返回值。在reconcileChildFibers中会根据newChild的类型来进入单节点的diff或者多节点diff。]]></description><category></category></item><item><title><![CDATA[react源码解析6.legacy模式和concurrent模式]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/128913749</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/128913749</guid><author>js_2028</author><pubDate>Tue, 07 Feb 2023 10:10:55 +0800</pubDate><description><![CDATA[concurrent Mode是react未来的模式，它用时间片调度实现了异步可中断的任务，根据设备性能的不同，时间片的长度也不一样，在每个时间片中，如果任务到了过期时间，就会主动让出线程给高优先级的任务。legacy模式是我们常用的，它构建dom的过程是同步的，所以在render的reconciler中，如果diff的过程特别耗时，那么导致的结果就是js一直阻塞高优先级的任务(例如用户的点击事件)，表现为页面的卡顿，无法响应。legacy 模式在合成事件中有自动批处理的功能，但仅限于一个浏览器任务。]]></description><category></category></item><item><title><![CDATA[react源码解析7.Fiber架构]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/128913782</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/128913782</guid><author>js_2028</author><pubDate>Tue, 07 Feb 2023 10:10:14 +0800</pubDate><description><![CDATA[fiberRoot：指整个应用的根节点，只存在一个。我们现在知道了存在current Fiber和workInProgress Fiber两颗Fiber树，Fiber双缓存指的就是，在经过reconcile（diff）形成了新的workInProgress Fiber然后将workInProgress Fiber切换成current Fiber应用到真实dom中，存在双Fiber的好处是在内存中形成视图的描述，在最后应用到dom中，减少了对dom的操作。fiberRoot：指整个应用的根节点，只存在一个。]]></description><category></category></item><item><title><![CDATA[react源码解析5.jsx&核心api]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/128898209</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/128898209</guid><author>js_2028</author><pubDate>Mon, 06 Feb 2023 10:59:31 +0800</pubDate><description><![CDATA[virtual Dom是一种编程方式，它以对象的形式保存在内存中，它描述了我们dom的必要信息，并且用类似react-dom等模块与真实dom同步，这一过程也叫协调(reconciler)，这种方式可以声明式的渲染相应的ui状态，让我们从dom操作中解放出来，在react中是以fiber树的形式存放组件树的相关信息，在更新时可以增量渲染相关dom，所以fiber也是virtual Dom实现的一部分，其实virtual Dom只是在更新的时候快，在应用初始的时候不一定快。，这就是为什么jsx文件要声明。]]></description><category></category></item><item><title><![CDATA[react源码解析4.源码目录结构和调试]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/128898169</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/128898169</guid><author>js_2028</author><pubDate>Mon, 06 Feb 2023 10:59:12 +0800</pubDate><description><![CDATA[方法一：可以用现成的包含本课程所有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：原生相关。]]></description><category></category></item><item><title><![CDATA[react源码解析20.总结&第一章的面试题解答]]></title><link>https://blog.youkuaiyun.com/js_2028/article/details/128629127</link><guid>https://blog.youkuaiyun.com/js_2028/article/details/128629127</guid><author>js_2028</author><pubDate>Tue, 10 Jan 2023 14:13:24 +0800</pubDate><description><![CDATA[至此我们介绍了react的理念，如果解决cpu和io的瓶颈，关键是实现异步可中断的更新。]]></description><category></category></item></channel></rss>