皮皮网

1.react�����鿴Դ��
2.打包React组件，打t打并发布到NPM上
3.preact源码解析，包后包后从preact中理解react原理
4.antd的源码运行config-overrides.js组合配置问题
5.放弃 console.log 吧！用 Debugger 你能读懂各种源码
6.React lazy/Suspense使用及源码解析

react�����鿴Դ��

       年末学习新技能，打t打react拖拽组件与高效代码调试技巧不容错过！包后包后学习第三方库如react-sortable-hoc时，源码运行易语言固定资产源码首先要掌握的打t打就是调试技巧。首先，包后包后创建一个新项目，源码运行尝试简单的打t打react-sortable-hoc示例，然后设置断点进行调试。包后包后但注意，源码运行直接在打包后的打t打产物中打点是无用的，这时就需要启用sourcemap来映射源代码。包后包后在项目中开启sourcemap，源码运行通过克隆并配置项目的rollup打包设置，确保调试时能访问源码。遇到只读源码文件时，检查CALL STACK，可能需要调整映射路径。若需修改node_modules中的文件，可使用patch-package避免覆盖。接下来，分析组件的初始化过程。SortableContainer负责管理，创建Manager对象并传递给子组件SortableElement。SortableElement负责注册自身，SortableHandle则关注节点标识和事件绑定。理解事件触发顺序后，逐步探索handleStart、handlePress、handleSortMove等关键函数。handlePress利用克隆节点模拟拖拽，handleSortMove则调整节点位置并动画化排序，handleSortEnd则进行清理工作。react-sortable-hoc主要利用mousemove和touchmove事件，结合css3动画实现拖拽和排序。但要注意，它使用了不推荐的reactDom.findDomNodeapi，以及仅限于类组件使用。学习过程中，还可以记录一些实用的函数，如获取元素偏移、移动数组元素和过滤对象属性等。app源码公众号提升调试效率和理解库的工作原理，是学习react拖拽组件的重要一环。希望这些技巧能帮助你在年末的学习旅程中更顺利，别忘了分享给有需要的朋友哦！

打包React组件，并发布到NPM上

       在本文中，我将分享如何将一个基于 TypeScript 和 React 构建的组件 DataZoomControl 包装和发布至 NPM 库的过程。此组件旨在用于未来项目的复用，因此在将代码打包和上传至 NPM 之前，我需要先进行一些准备工作。

       为了确保发布的版本与项目源码配置有所不同，我决定在现有项目分支上创建一个新的分支，命名为 publish，以保存发布版本的代码和配置。同时，对项目结构进行相应调整，以适应发布至 NPM 的需求。

       在打包工具的选择上，我选择了 umijs/father，这是一款适合 React 应用的高性能打包工具，能够帮助我更有效地构建和优化代码。

       在进行代码打包的过程中，我遵循了官方文档的指导，确保所有依赖和配置均正确无误，以确保发布的组件能够顺利在其他项目中使用。

       在准备就绪后，我将组件打包，并通过 NPM 发布至公有仓库，供其他开发者使用。这一过程涉及创建和更新 NPM 包的元数据，以及确保代码质量符合 NPM 的发布标准。

       最后，发布组件至 NPM 是一个提升代码可复用性和社区共享价值的过程。通过遵循最佳实践和标准，我们可以为开发者社区提供一个高效、可靠的组件，从而促进技术的持续发展和创新。

       总的来说，将 React 组件打包和发布至 NPM 是一个涉及前期准备、选择合适的打包工具、进行代码优化、发布至公有仓库以及确保质量控制的过程。这一过程不仅有助于实现代码的顶底神器源码复用，还能推动开发者社区的技术交流与合作。

preact源码解析，从preact中理解react原理

       基于preact.3.4版本进行分析，完整注释请参阅链接。阅读源码建议采用跳跃式阅读，遇到难以理解的部分先跳过，待熟悉整体架构后再深入阅读。如果觉得有价值，不妨为项目点个star。

       一直对研究react源码抱有兴趣，但每次都半途而废，主要原因是react项目体积庞大，代码颗粒化且执行流程复杂，需要投入大量精力。因此，转向研究preact，一个号称浓缩版react，体积仅有3KB。市面上已有对preact源码的解析，但大多存在版本过旧和分析重点不突出的问题，如为什么存在_nextDom？value为何不在diffProps中处理？这些都是解析代码中的关键点和收益点。

       一. 文件结构

       二. 渲染原理

       简单demo展示如何将App组件渲染至真实DOM中。

       vnode表示节点描述对象。在打包阶段，babel的transform-react-jsx插件会将jsx语法编译为JS语法，即转换为React.createElement(type, props, children)形式。preact中需配置此插件，使React.createElement对应为h函数，编译后的jsx语法如下：h(App,null)。

       执行render函数后，先调用h函数，然后通过createVNode返回虚拟节点。最终，h(App,null)的执行结果为{ type:App,props:null,key:null,ref:null}，该虚拟节点将被用于渲染真实DOM。

       首次渲染时，旧虚拟节点基本为空。diff函数比较虚拟节点与真实DOM，创建挂载完成，执行commitRoot函数，该函数执行组件的did生命周期和setState回调。

       2. diff

       diff过程包含diff、diffElementNodes、加密源码怎么解密diffChildren、diffProps四个函数。diff主要处理函数型虚拟节点，非函数型节点调用diffElementNodes处理。判断虚拟节点是否存在_component属性，若无则实例化，执行组件生命周期，调用render方法，保存子节点至_children属性，进而调用diffChildren。

       diffElementNodes处理HTML型虚拟节点，创建真实DOM节点，查找复用，若无则创建文本或元素节点。diffProps处理节点属性，如样式、事件监听等。diffChildren比较子节点并添加至当前DOM节点。

       分析diff执行流程，render函数后调用diff比较虚拟节点，执行App组件生命周期和render方法，保存返回的虚拟节点至_children属性，调用diffChildren比较子节点。整体虚拟节点树如下：

       diffChildren遍历子节点，查找DOM节点，比较虚拟节点，返回真实DOM，追加至parentDOM或子节点后。

       三. 组件

       1. component

       Component构造函数设置状态、强制渲染、定义render函数和enqueueRender函数。

       强制渲染通过设置_force标记，加入渲染队列并执行。_force为真时，diff渲染不会触发某些生命周期。

       render函数默认为Fragment组件，返回子节点。

       enqueueRender将待渲染组件加入队列，延迟执行process函数。process排序组件，渲染最外层组件，调用renderComponent渲染，更新DOM后执行所有组件的直接粘贴指标源码did生命周期和setState回调。

       2. context

       使用案例展示跨组件传递数据。createContext创建context，包含Provider和Consumer组件。Provider组件跨组件传递数据，Consumer组件接收数据。

       源码简单，createContext后返回context对象，包含Consumer与Provider组件。Consumer组件设置contextType属性，渲染时执行子节点，等同于类组件。

       Provider组件创建函数，渲染到Provider组件时调用getChildContext获取ctx对象，diff时传递至子孙节点组件。组件设置contextType，通过sub函数订阅Provider组件值更新，值更新时渲染订阅组件。

       四. 解惑疑点

       理解代码意图。支持Promise时，使用Promise处理，否则使用setTimeout。了解Promise.prototype.then.bind(Promise.resolve())最终执行的Promise.resolve().then。

       虚拟节点用Fragment包装的原因是，避免直接调用diffElementNodes，以确保子节点正确关联至父节点DOM。

       hydrate与render的区别在于，hydrate仅处理事件，不处理其他props，适用于服务器端渲染的HTML，客户端渲染使用hydrate提高首次渲染速度。

       props中value与checked单独处理，diffProps不处理，处理在diffChildren中，找到原因。

       在props中设置value为空的原因是，遵循W3C规定，不设置value时，文本内容作为value。为避免MVVM问题，需在子节点渲染后设置value为空，再处理元素value。

       组件异常处理机制中，_processingException和_pendingError变量用于标记组件异常处理状态，确保不会重复跳过异常组件。

       diffProps中事件处理机制，为避免重复添加事件监听器，只在事件函数变化时修改dom._listeners，触发事件时仅执行保存的监听函数，移除监听在onChange设置为空时执行。

       理解_nextDom的使用，确保子节点与父节点关联，避免在函数型节点渲染时进行不必要的关联操作。

antd的config-overrides.js组合配置问题

       在进行React项目开发时，我遇到了一个关于Ant Design配置的问题。项目中原本的icon元素在引入Ant Design后出现了空白现象，这让我感到疑惑。经过一番排查，我发现这是在引入Ant Design的`config-overrides.js`文件后，导致了原本的icon配置被覆盖。

       在未引入Ant Design时，项目的配置文件是这样的：

       引入Ant Design后，配置文件出现了变化，这可能是`config-overrides.js`文件中对某些配置进行了调整，导致原本的icon配置失效。

       了解到`config-overrides.js`文件会覆盖原有的webpack配置后，我开始思考如何解决这个问题。经过多次尝试，我找到了一个解决方案——将原本额外配置的webpack.config.js内容整合到`config-overrides.js`中。

       为了实现这一目标，我将原本的webpack配置记录整理，并将其内容整合进`config-overrides.js`中，以确保不会被覆盖。以下是我整合后的配置源码：

       (具体整合后的配置源码)

       通过将额外配置的webpack.config.js内容写入`config-overrides.js`中，问题得以解决，最终实现了组合配置成功的目标。

放弃 console.log 吧！用 Debugger 你能读懂各种源码

       很多同学不清楚为什么要使用debugger进行调试，难道console.log不行吗？

       即使学会了使用debugger，还是有很多代码看不懂，如何调试复杂的源码呢？

       这篇文章将为你讲解为什么要使用这些调试工具：console.log vs Debugger。

       相信绝大多数同学都会使用console.log进行调试，将想查看的变量值打印在控制台。

       这种方法可以满足基本需求，但遇到对象打印时就无法胜任了。

       比如，我想查看webpack源码中的compilation对象的值，我尝试打印了一下：

       但你会发现，当对象的值也是对象时，它不会展开，而是打印一个[Object] [Array]这样的字符串。

       更严重的是，打印的内容过长会超过缓冲区的大小，在terminal中显示不全：

       而使用debugger来运行，在这里设置一个断点查看，就没有这些问题了：

       有些同学可能会说，那打印一个简单的值时使用console.log还是很方便的。

       比如这样：

       真的吗？

       那还不如使用logpoint：

       代码执行到这里就会打印：

       而且没有污染代码，使用console.log的话，调试完成后这个console也不得不删除掉。

       而logpoint不需要，它就是一个断点的设置，不在代码中。

       当然，最重要的是debugger调试可以看到调用栈和作用域！

       首先是调用栈，它就是代码的执行路线。

       比如这个App的函数组件，你可以看到渲染这个函数组件会经历workLoop、beginWork、renderWithHooks等流程：

       你可以点击调用栈的每一帧，查看都执行了什么逻辑，用到了什么数据。比如可以看到这个函数组件的fiber节点：

       再就是作用域，点击每一个栈帧就可以看到每个函数的作用域中的变量：

       使用debugger可以看到代码的执行路径，每一步的作用域信息。而你使用console.log呢？

       只能看到那个变量的值而已。

       得到的信息量差距不是一点半点，调试时间长了，别人会对代码的运行流程越来越清晰，而你使用console.log呢？还是老样子，因为你看不到代码执行路径。

       所以，不管是调试库的源码还是业务代码，不管是调试Node.js还是网页，都推荐使用debugger打断点，别再用console.log了，即使想打印日志，也可以使用LogPoint。

       而且在排查问题的时候，使用debugger的话可以加一个异常断点，代码跑到抛异常的地方就会断住：

       可以看到调用栈来理清出错前都走了哪些代码，可以通过作用域来看到每一个变量的值。

       有了这些，排查错误就变得轻松多了！

       而你使用console.log呢？

       什么也没有，只能自己猜。

       Performance

       前面说debugger调试可以看到一条代码的执行路径，但是代码的执行路径往往比较曲折。

       比如那个React会对每个fiber节点做处理，每个节点都会调用beginWork。处理完之后又会处理下一个节点，再次调用beginWork：

       就像你走了一条小路，然后回到大路之后又走了另一条小路，使用debugger只能看到当前这条小路的执行路径，看不到其他小路的路径：

       这时候就可以结合Performance工具了，使用Performance工具看到代码执行的全貌，然后用debugger来深入每一条代码执行路径的细节。

       SourceMap

       sourcemap非常重要，因为我们执行的都是编译打包后的代码，基本是不可读的，调试这种代码也没有什么意义，而sourcemap就可以让我们直接调试最初的源码。

       比如vue，关联了sourcemap之后，我们能直接调试ts源码：

       nest.js也是：

       不使用sourcemap的话，想搞懂源码，但你调试的是编译后的代码，怎么读懂呢？

       读懂一行

       前面说的debugger、Performance、SourceMap只是调试代码的工具，那会了调试工具，依然读不懂代码怎么办呢？

       我觉得这是不可能的。

       为什么这么说呢？

       就拿react源码来说：

       switch case能读懂吧。三目运算符能读懂吧。函数调用能读懂吧。

       每一行代码都能读懂，而全部的代码不就是由这一行行代码组成的么？

       加上我们可以单步执行来知道代码执行路径。

       为啥每行代码都能读懂，连起来就读不懂了呢？

       那应该是代码太多了，而你花的时间不够而已。

       先要读懂一行，一个函数，读懂一个小功能的实现流程，慢慢积累，之后了解的越来越多之后，你能读懂的代码就会越多。

       总结

       这篇文章讲了为什么要使用调试工具，如何读懂复杂代码。

       console.log的弊端太多了，大对象打印不全，会超过terminal缓冲区，对象属性不能展开等等，不建议大家使用。即使要打印也可以使用LogPoint。

       使用debugger可以看到调用栈，也就是代码的执行路径，每个栈帧的作用域，可以知道代码从开始运行到现在都经历了什么，而console.log只能知道某个变量的值。

       此外，报错的时候也可以通过异常断点来梳理代码执行路径来排查报错原因。

       但debugger只能看到一条执行路径，可以使用Performance录制代码执行的全流程，然后再结合debugger来深入其中一条路径的执行细节。

       此外，只有调试最初的源码才有意义，不然调试编译后的代码会少很多信息。可以通过SourceMap来关联到源码，不管是Vue、React的源码还是Nest.js、Babel等的源码。

       会了调试之后，就能调试各种代码了，不存在看不懂的源码，因为每一行代码都是基础的语法，都是能看懂的，如果看不懂，只可能是代码太多了，你需要更多的耐心去读一行行代码、一个个函数、理清一个个功能的实现，慢慢积累就好了。

       掌握基于debugger、Performance、SourceMap等调试代码之后，各种网页和Node.js代码都能调试，各种源码都能读懂！

React lazy/Suspense使用及源码解析

       在React v.6.0发布后的一年，我开始使用新版React进行项目开发，虽然没有立即更新，但新项目的需求促使我关注了代码分割技术，特别是lazy和suspense。React官网将其视为code-splitting的核心内容，旨在解决大型项目中第三方库导致的打包文件过大，加载不必要的内容问题。

       React.lazy的核心是在用户实际需要时才加载相关的模块，这对于基于路由的懒加载尤其适用。其使用方式简单，只需返回一个Promise包装的组件导入函数，并配合Suspense组件提供过渡效果。不过，需要注意的是，React.lazy并不适用于服务器端渲染（SSR）。

       在实际项目中，根据组件的复杂性，我们可以灵活决定是否采用懒加载。例如，在App.tsx中定义路由时，针对每个路由地址，我们使用高阶组件封装Suspense。使用lazy后，组件会被按需打包成多个chunk文件。

       深入React源码，我们发现LazyComponent的加载在beginWork函数的mountLazyComponent中实现。这个过程包括解析lazy组件类型、确定组件类型（class或function）、设置默认props、以及执行updateClassComponent或updateSuspenseComponent方法进行组件渲染。

       总的来说，React.lazy和Suspense提供了有效地管理组件加载和优化用户体验的手段，通过源码分析，我们可以更好地理解其工作原理，并根据项目需求灵活运用。如有任何问题或改进意见，欢迎大家交流讨论。