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的解析openpgp 源码分析源代码，从基础到进阶，源码实现深入理解。解析

       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，巩固理解。dnf最新源码

       . 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的java 文件操作 源码相关配置以及常用插件都了如指掌了吧；

       vite作为一个新型的前端构建工具，它还很年轻，也有很多扩展性，那么为什么我们不趁现在与它一起携手前进呢？做一些于你于我于大家更有意义的事呢？

快速体验

       要想写一个插件，那必须从创建一个项目开始，下面的vite插件通用模板大家以后写插件可以直接clone使用；

       插件通用模板github：体验入口

       插件github：体验入口

       建议包管理器使用优先级：pnpm>yarn>npm>cnpm

       长话短说，直接开干~

创建vite插件通用模板1.初始化

       1.1创建一个文件夹并且初始化：初始化按照提示操作即可

mkdirvite-plugin-progress&&cdvite-plugin-progress&&pnpminit

       1.2安装typescript

pnpmitypescript@types/node-D

       1.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往客户端发送自定义的openfire 3.9.3源码部署事件；

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-D7

       cache.ts

pnpmitypescript@types/node-D8最后

       该系列会是一个持续更新系列，关于整个《Vite从入门到精通》专栏，我主要会从如下图几个方面讲解，请大家拭目以待吧！！！

       宝贝们，都看到这里了，要不点个赞呗?

原文：/post/

源码级解析，搞懂 React 动态加载（上） —— React Loadable

       本系列深入探讨SPA单页应用技术栈，首篇聚焦于React动态加载机制，解析当前流行方案的实现原理。

       随着项目复杂度的提升和代码量的激增，如企业微信文档融合项目，代码量翻倍，性能和用户体验面临挑战。SPA的特性使得代码分割成为优化代码体积的关键策略。

       code-splitting原理在于将大型bundle拆分为多个，实现按需加载和缓存，显著降低前端应用的加载体积。ES标准的import()函数提供动态加载支持，babel编译后，jquery 1.8 源码下载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。