1.react源码解析8.render阶段
2.你还不会写vite插件吗？没关系，源码我教你啊！解析
3.源码级解析，源码搞懂 React 动态加载（上） —— React Loadable
4.面试官:react中的解析setState是同步的还是异步的
5.web前端开发学习_掘金前端课程(小册)推荐
6.搞懂React源码系列-React Diff原理
react源码解析8.render阶段
本文深入解析React源码中的渲染阶段，带你掌握React高效学习的源码精髓。让我们一起探索React的解析导航定位算法源码源代码，从基础到进阶，源码实现深入理解。解析
1. 开篇介绍和面试题
从最基础开始，源码解读面试题背后的解析原理，为你的源码学习之旅铺垫。
2. React设计理念
了解React的解析核心理念，为何它在现代前端开发中独树一帜。源码
3. React源码架构
拆解React源码结构，解析理解其设计的源码精妙之处。
4. 源码目录结构与调试
掌握React源码的目录布局和调试技巧，提升代码阅读效率。
5. JSX与核心API
深入学习JSX语法与React核心API，构建高效、灵活的组件。
6. Legacy与Concurrent模式入口函数
比较Legacy和Concurrent模式，了解React性能优化之道。
7. Fiber架构
揭秘Fiber的运作机制，理解React渲染的高效实现。
8. Render阶段
重点解析Render阶段的核心工作，构建Fiber树与生成effectList。
9. Diff算法
深入了解React的Diff算法，高效计算组件更新。
. Commit阶段
探索Commit阶段的流程，将Fiber树转换为真实DOM。
. 生命周期
掌握React组件的生命周期，优化组件性能。
. 状态更新流程
分析状态更新的机制，实现组件响应式的开发。
. Hooks源码
深入Hooks源码，理解状态管理与函数组件的结合。
. 手写Hooks
实践动手编写Hooks，巩固理解。腾龙分时源码指标
. Scheduler与Lane
探讨React的调度机制与Lane概念，优化渲染性能。
. Concurrent模式
探索Concurrent模式下的React渲染流程，提高应用的交互流畅度。
. Context
学习Context的用法，简化组件间的数据传递。
. 事件系统
深入事件处理机制，实现组件间的交互。
. 手写迷你版React
实践构建一个简单的React框架，深化理解。
. 总结与面试题解答
回顾学习要点，解答面试常见问题，为面试做好充分准备。
. Demo
通过实际案例，直观展示React渲染流程与技巧。
本课程带你全面掌握React渲染阶段的关键知识与实战技能，从理论到实践，提升你的前端开发能力。
你还不会写vite插件吗？没关系，我教你啊！
前言
大家好，我是易师傅，在现如今Vite工具快开始盛行之下，我们是不是可以去做一件有意义的事呢，比如写一个vite插件，你觉得怎么样？
刚好我们可以趁vite插件生态还未很成熟阶段，做一个让自己顺心，让领导赏心，让社区开心的插件，与之携手共进。
如果大家对vite感兴趣可以去看看专栏：?《Vite从入门到精通》
通过本文你可以学到如何创建一个vite插件模板
vite插件的各个钩子作用
vite插件的钩子执行顺序
如何写一个自己的插件
了解vite插件1.什么是vite插件vite其实就是一个由原生?ESModule?驱动的新型Web开发前端构建工具。
vite插件就可以很好的扩展vite自身不能做到的事情，比如文件的压缩、对commonjs的支持、打包进度条等等。
2.为什么要写vite插件相信在座的每位同学，到现在对webpack的指标主力资金源码相关配置以及常用插件都了如指掌了吧；
vite作为一个新型的前端构建工具，它还很年轻，也有很多扩展性，那么为什么我们不趁现在与它一起携手前进呢？做一些于你于我于大家更有意义的事呢？
快速体验要想写一个插件，那必须从创建一个项目开始，下面的vite插件通用模板大家以后写插件可以直接clone使用；
插件通用模板github：体验入口
插件github：体验入口
建议包管理器使用优先级：pnpm>yarn>npm>cnpm
长话短说，直接开干~
创建vite插件通用模板1.初始化1.1创建一个文件夹并且初始化：初始化按照提示操作即可
mkdirvite-plugin-progress&&cdvite-plugin-progress&&pnpminit1.2安装typescript
pnpmitypescript@types/node-D1.3配置tsconfig.json
{ "compilerOptions":{ "module":"ESNext","target":"esnext","moduleResolution":"node","strict":true,"declaration":true,"noUnusedLocals":true,"esModuleInterop":true,"outDir":"dist","lib":["ESNext"],"sourceMap":false,"noEmitOnError":true,"noImplicitAny":false},"include":["src/*","*.d.ts"],"exclude":["node_modules","examples","dist"]}1.4安装vite
//进入package.json{ ..."devDependencies":{ "vite":"*"}...}2.配置eslint和prettier（可选）安装eslint
pnpmieslint@typescript-eslint/parser@typescript-eslint/eslint-plugin--save-dev配置.eslintrc：配置连接
安装prettier（可选）
pnpmiprettiereslint-config-prettiereslint-plugin-prettier--save-dev配置.prettierrc：配置连接
3.新增src/index.ts入口importtype{ PluginOption}from'vite';exportdefaultfunctionvitePluginTemplate():PluginOption{ return{ //插件名称name:'vite-plugin-template',//pre会较于post先执行enforce:'pre',//post//指明它们仅在'build'或'serve'模式时调用apply:'build',//apply亦可以是一个函数config(config,{ command}){ console.log('这里是config钩子');},configResolved(resolvedConfig){ console.log('这里是configResolved钩子');},configureServer(server){ console.log('这里是configureServer钩子');},transformIndexHtml(html){ console.log('这里是transformIndexHtml钩子');},}}其中的vite插件函数钩子会在下面详细详解~
到这里，那么我们的基本模版就建好了，但是我们现在思考一下，我们应该怎么去运行这个插件呢？
那么我们就需要创建一些examples例子来运行这个代码了；
4.创建examples目录我这里创建了三套项目demo，大家直接copy就行了，这里就不详细介绍了
vite-react
vite-vue2
vite-vue3
如果你的插件需要多跑一些demo，自行创建项目即可；
那么下面我们就需要配置examples下的项目与当前根目录的插件做一个联调了（下面以examples/vite-vue3为例）。
5.配置examples/vite-vue3项目修改examples/vite-vue3/package.json
{ ..."devDependencies":{ ..."vite":"link:../../node_modules/vite","vite-plugin-template":"link:../../"}}上面意思就是说：
要把examples/vite-vue3项目中的vite版本与根目录vite-plugin-template的版本一致；
同时要把examples/vite-vue3项目中的vite-plugin-template指向你当前根目录所开发的插件；
引入插件：examples/vite-vue3/vite.config.ts
importtemplatefrom'vite-plugin-template';exportdefaultdefineConfig({ ...plugins:[vue(),template()],...});安装：cdexamples/vite-vue3&&pnpminstall
cdexamples/vite-vue3&&pnpminstall注意：examples/vite-vue2和examples/vite-react的配置与这一致
思考：
到这里，我们再思考一下，我们把examples/vite-vue3中的项目配置好了，但是我们应该怎么去运行呢？
直接去examples/vite-vue3目录下运行pnpmrunbuild或者pnpmrundev？
这样显然是不能运行成功的，因为我们的根目录下的src/index.ts是没法直接运行的，所以我们需要把.ts文件转义成.js文件；
那么我们怎么处理呢？
那么我们不得不去试着用用一个轻小且无需配置的工具tsup了。
6.安装tsup配置运行命令tsup是一个轻小且无需配置的，由esbuild支持的构建工具；
同时它可以直接把.ts、.tsx转成不同格式esm、cjs、iife的工具；
安装tsup
pnpmitypescript@types/node-D0在根目录下的package.json中配置
pnpmitypescript@types/node-D.开发环境运行开发环境运行：实时监听文件修改后重新打包（热更新）
pnpmitypescript@types/node-D2运行examples中的任意一个项目（以vite-vue3为例）
pnpmitypescript@types/node-D3注意：
如果你的插件只会在build时运行，那就设置"example:vue3":"cdexamples/vite-vue3&&pnpmrunbuild"；
反之就运行pnpmrundev
输出：
到这里你就可以边开发边运行了，尤雨溪看了都说爽歪歪~
8.发布安装bumpp添加版本控制与tag
pnpmitypescript@types/node-D4配置package.json
pnpmitypescript@types/node-D5开发完插件后运行发布
pnpmitypescript@types/node-D6那么到这里，我们的vite插件模板就已经写好了，大家可以直接克隆vite-plugin-template模板使用；
如果你对vite的插件钩子和实现一个真正的vite插件感兴趣可以继续往下面看；
vite的插件钩子hooks们1.vite独有的钩子enforce：值可以是pre?或?post，pre会较于post先执行；
apply：值可以是build或serve?亦可以是一个函数，指明它们仅在build或serve模式时调用；
config(config,env)：可以在vite被解析之前修改vite的相关配置。钩子接收原始用户配置config和一个描述配置环境的变量env；
configResolved(resolvedConfig)：在解析vite配置后调用。使用这个钩子读取和存储最终解析的配置。当插件需要根据运行的命令做一些不同的事情时，它很有用。
configureServer(server)：主要用来配置开发服务器，为dev-server(connect应用程序)添加自定义的中间件；
transformIndexHtml(html)：转换index.html的专用钩子。钩子接收当前的HTML字符串和转换上下文；
handleHotUpdate(ctx)：执行自定义HMR更新，可以通过ws往客户端发送自定义的怎么扫描源码漏洞事件；
2.vite与rollup的通用钩子之构建阶段options(options)：在服务器启动时被调用：获取、操纵Rollup选项，严格意义上来讲，它执行于属于构建阶段之前；
buildStart(options)：在每次开始构建时调用；
resolveId(source,importer,options)：在每个传入模块请求时被调用，创建自定义确认函数，可以用来定位第三方依赖；
load(id)：在每个传入模块请求时被调用，可以自定义加载器，可用来返回自定义的内容；
transform(code,id)：在每个传入模块请求时被调用，主要是用来转换单个模块；
buildEnd()：在构建阶段结束后被调用，此处构建结束只是代表所有模块转义完成；
3.vite与rollup的通用钩子之输出阶段outputOptions(options)：接受输出参数；
renderStart(outputOptions,inputOptions)：每次bundle.generate和bundle.write调用时都会被触发；
augmentChunkHash(chunkInfo)：用来给chunk增加hash；
renderChunk(code,chunk,options)：转译单个的chunk时触发。rollup输出每一个chunk文件的时候都会调用；
generateBundle(options,bundle,isWrite)：在调用bundle.write之前立即触发这个hook；
writeBundle(options,bundle)：在调用bundle.write后，所有的chunk都写入文件后，最后会调用一次writeBundle；
closeBundle()：在服务器关闭时被调用
4.插件钩子函数hooks的执行顺序（如下图）5.插件的执行顺序别名处理Alias
用户插件设置enforce:'pre'
vite核心插件
用户插件未设置enforce
vite构建插件
用户插件设置enforce:'post'
vite构建后置插件(minify,manifest,reporting)
手撸一个vite插件下面以vite打包进度条插件为例；
插件地址：github如果您觉得不错欢迎star?
该插件已被vite官方收集至官方文档：链接地址
因为文章的重点不在于这个插件的详细实现过程，所以本文只会贴上源代码供大家参考，详细介绍会在下一篇文章中讲解，请大家拭目以待吧！
inde.ts
pnpmitypescript@types/node-D7cache.ts
pnpmitypescript@types/node-D8最后该系列会是一个持续更新系列，关于整个《Vite从入门到精通》专栏，我主要会从如下图几个方面讲解，请大家拭目以待吧！！！
宝贝们，都看到这里了，要不点个赞呗?
原文：/post/源码级解析，搞懂 React 动态加载（上） —— React Loadable
本系列深入探讨SPA单页应用技术栈，首篇聚焦于React动态加载机制，解析当前流行方案的实现原理。
随着项目复杂度的提升和代码量的激增，如企业微信文档融合项目，代码量翻倍，性能和用户体验面临挑战。SPA的特性使得代码分割成为优化代码体积的关键策略。
code-splitting原理在于将大型bundle拆分为多个，实现按需加载和缓存，显著降低前端应用的加载体积。ES标准的import()函数提供动态加载支持，babel编译后，呆萌源码部署import将模块内容转换为ESM数据结构，通过promise返回，加载后在then中注册回调。
webpack检测到import()时，自动进行code-splitting，动态import的模块被打包到新bundle中。通过注释可自定义命名，如指定bar为动态加载bundle。
实现简易版动态加载方案，利用code-splitting和import，组件在渲染前加载，渲染完成前展示Loading状态，优化用户体验。然而，复杂场景如加载失败、未完成等需要额外处理。
引入React-loadable，动态加载任意模块的高阶组件，封装动态加载逻辑，支持多资源加载。通过传入参数如模块加载函数、Loading状态组件，统一处理动态加载成功与异常。
通过react-loadable改造组件，实现加载前渲染Loading状态，加载完成后更新组件。支持单资源或多资源Map动态加载，兼容多种场景。
Loadable核心是createLoadableComponent函数，采用策略模式，根据不同场景（单资源或多资源Map）加载模块。load方法封装加载状态与结果，loadMap方法加载多个loader，返回对象。
LoadableComponent高阶组件实现逻辑简单，通过注册加载完成与失败的回调，更新组件状态。默认渲染方法为React.createElement()，使用Loadable.Map时需显式传入渲染函数。
在服务端渲染（SSR）场景下，动态加载组件无法准确获取DOM结构，react-loadable提供解决方案，将异步加载转化为同步，支持SSR。
React loadable原始仓库不再维护，局限性体现在适用的webpack与babel版本、兼容性问题以及不支持现代React项目。针对此问题，@react-loadable/revised包提供基于Hooks与ts重构的解决方案。
React-loadable的实现原理与思路较为直观，下文将深入探讨React.lazy + Suspense的原生解决方案，理解Fiber架构中的动态加载，有助于掌握更深层次的知识。
面试官:react中的setState是同步的还是异步的
在面试过程中，经常会遇到关于React中setState操作同步或异步的问题。下面通过几个例子来解答这个问题：
例子1：点击按钮触发更新，在handle函数中调用两次setState。
例子2：在setTimeout回调中执行例子1的两次setState操作。
例子3：使用unstable_batchedUpdates在setTimeout回调中执行，unstable_batchedUpdates的回调函数中调用两次setState。
例子4：两次setState在setTimeout回调中执行，但使用concurrent模式启动，即通过调用ReactDOM.unstable_createRoot启动应用。
简单来说，在同一个上下文中触发多次更新，这些更新会被合并为一次更新，例如在之前的React版本中，如果脱离当前的上下文，则不会被合并。原因是，处于同一个上下文中的多次setState操作的executionContext都会包含BatchedContext，包含BatchedContext的setState操作会合并。当executionContext等于NoContext时，就会同步执行SyncCallbackQueue中的任务，因此setTimeout中的多次setState操作不会合并，且会同步执行。
在Concurrent mode下，上面的例子也会合并为一次更新，原因在于简化源码中，多次setState操作会比较这些操作的优先级，如果优先级一致，则会先返回，不会进行后面的渲染阶段。
总结：
在legacy模式下：命中batchedUpdates时是异步，未命中batchedUpdates时是同步的。
在concurrent模式下：都是异步的。
如需高效学习，可观看视频讲解，了解往期React源码解析文章，涵盖React设计、源码架构、核心API、legacy与concurrent模式、Fiber架构、渲染阶段、diff算法、commit阶段、生命周期、状态更新流程、hooks源码、手写hooks、scheduler与Lane、concurrent模式、context、事件系统、手写迷你版React等详细内容。
web前端开发学习_掘金前端课程(小册)推荐
欢迎踏上前端开发者之旅，这里精心挑选了一系列课程，助你快速提升技能，从基础到进阶，一网打尽。 React进阶: 由资深工程师指导，探索React的深度应用，实战网易云音乐WebApp项目，掌握全家桶和Immutable数据流。[立即学习](https://link.to/react) 面试通关宝典: 《前端面试之道》构建全面的知识体系，让你在面试中游刃有余。[深入学习](https://link.to/interview) Vue揭秘: 新手友好的Vue.js源码解析，前阿里工程师带你探索其内部机制。[揭秘](https://link.to/vue) 性能优化实战: 电商集团工程师分享，教你理解并提升Web应用的性能。[提升](https://link.to/performance) JavaScript设计模式: 实战编程指南，多本书作者带你掌握编程套路。[掌握](https://link.to/design_patterns) 小程序开发: 从零开始，腾讯云讲师带你入门Taro多端开发。[入门](https://link.to/taro) 前端算法实战: 针对有一定基础的开发者，提升算法理解和实战能力。[进阶](https://link.to/algorithm) Web开发指南: 知识点梳理和高频面试题，为求职者打造面试利器。[指南](https://link.to/web_guide) 此外，还有： React Hooks与Immutability深度解析: 深入理解高级用法，提升代码效率。[深入了解](https://link.to/hooks) 大厂H5实战项目: 京东腾讯工程师分享，实用技能尽在其中。[实战](https://link.to/h5_practical) 想进一步挑战？这里有： Vue3与企业级项目实战: 用Element Plus和Spring Boot构建高效应用。[实战](https://link.to/vue3_project) WebGL入门到精通: 探索3D图形处理在Web中的无限可能。[探索](https://link.to/webgl) 还有更多深度学习内容，如Node.js的全方位应用、NestJS项目实战等，等待你的探索。立即开启你的知识之旅吧！ Node.js全栈实战: 从前端到服务端，Node.js工程师的成长阶梯。[全栈](https://link.to/nodejs_fullstack) Vue商城实战: Spring Boot与Vue技术栈的完美结合，实战项目教学。[实战](https://link.to/vue_mall) Node DevOps实战: 从头到尾，全程解锁DevOps实战技巧。[DevOps](https://link.to/devops) 区块链入门: 前端开发者也能玩转区块链，以太坊智能合约和DApp开发。[区块链](https://link.to/blockchain) Uniapp全能教程: 阿面老师带你构建跨平台应用，轻松步入多端开发。[全能](https://link.to/uniapp) 现代布局艺术: 大漠老师分享布局技巧，提升Web开发美感。[布局](https://link.to/layout) Node.js底层剖析: 字节跳动工程师深入讲解，理解Node.js底层秘密。[剖析](https://link.to/nodejs_depth) 想要了解更多，可点击这里获取更多详细内容。搞懂React源码系列-React Diff原理
时隔2年，重新审视React源码，理解了许多过去未曾明晰的内容。本文聚焦于通过实际案例结合相关React源码，集中探讨React Diff原理。我们将使用当前最新React版本：..1。同时，今年计划推出“搞懂React源码系列”，旨在以通俗易懂的方式深入解析React的核心部分。年，该系列将涵盖以下内容：
React Diff原理
React 调度原理
搭建阅读React源码环境-支持所有版本断点调试
React Hooks原理
欢迎关注我的博客。
在深入Diff算法之前，有必要先理解React Fiber。虽然Fiber并不复杂，但全面理解需要时间。本文重点是Diff原理，因此Fiber介绍将简要进行。
Fiber是React中的抽象节点对象，它将所有节点连接成链表树。每个Fiber可能包含子Fiber、相邻Fiber以及父Fiber。React使用链表形式连接所有Fiber，形成树结构。Fiber还带有副作用标签（effectTag），如替换（Placement）和删除（Deletion），用于后续更新DOM。
值得注意的是，React Diff过程中，除了Fiber，还涉及基本的React元素对象，如将foo编译后的对象为：{ type: 'div', props: { children: 'foo' } }。
Diff过程始于reconcileChildren(...)
总流程如下：
reconcileChildren(...)
在Diff时，比较中的旧内容为Fiber，而新内容为React元素、文本或数组。新内容为对象时，流程分为两步：reconcileSingleElement(...)和placeSingleChild(...)。以React元素为例，流程如下：
reconcileSingleElement(...)
这里正式开始Diff，child为旧内容Fiber，element为新内容，它们的元素类型不同。React将“删除”旧内容Fiber及其所有相邻Fiber（添加Deletion标签），并基于新内容生成新的Fiber。然后将新Fiber设置为父Fiber的child。
如果新旧内容的元素类型相同，则通过fiber复用生成新的Fiber。同样设置为父Fiber的child。
总结新内容为React元素的Diff流程：
reconcileChildren(...)
新内容为文本时，逻辑与新内容为React元素类似。新内容为数组时，通过遍历数组元素，与React元素的处理方式类似，生成新的Fiber。
总结新内容为数组的Diff流程：
reconcileChildrenArray(...)
Diff的三种情况总结：比较结果相同：复用旧内容Fiber，结合新内容生成新Fiber
比较结果不同：仅通过新内容创建新Fiber
然后给旧内容Fiber添加替换标签，或给旧内容Fiber及其所有相邻元素添加删除标签。最后将新的（第一个）Fiber设为父Fiber的child。