1.【Rematch 源码系列】四、小包Third-Party plugins
2.没写过复杂 React 组件？来实现下 AntD 的裹源 Space 组件吧
3.history 源码分析
4.LaTeX公式：加方框
5.webpack之devtool详解

【Rematch 源码系列】四、Third-Party plugins

       本文深入探讨了rematch的包裹两个常用第三方插件：immer与loading。immer插件旨在简化state的什意思修改过程，通过引入immerjs，小包允许开发者在reducer中使用mutable状态，裹源传媒源码模板下载进而生成immutable状态，包裹简化了常规操作。什意思immer插件的小包实现相对简单，只需将常规reducer包裹一层，裹源使之通过immerjs处理即可。包裹

       immer插件的什意思核心在于其对reducer的封装，通过immer.produce方法处理draft状态，小包简化了mutable状态的裹源管理，避免了复杂的包裹clone和赋值操作。当状态为简单数据类型时，不会使用immer.produce，以保持代码的简洁性。更多关于immer.produce和combineReducers的使用和原理可参考官方文档。

       然而，immer插件的设计存在缺陷，即许多reducer配置若不能以数组形式存储，而是被替换，则可能导致插件配置失效。rematch v2版本通过引入更细粒度的plugin hooks（如onReducer）解决了这一问题，提升了配置的灵活性。

       紧接着是loading插件，专注于管理异步操作的状态，包括网络请求等。其核心在于onModel钩子的使用，定义了全局和模型级别的loading状态，并为特定操作定义了show和hide两个reducer，动态跟踪和控制加载状态。

       loading插件的实现通过初始化代码定义了全局和模型级别的loading状态，并使用onModel钩子处理模型操作，对特定的effect动作进行管理，包装原始动作以实现状态控制。两个reducer，show和hide，分别用于增加和减少操作状态的计数，以此实现对加载状态的动态更新。

       本文综述了rematch的immer和loading插件的实现原理、使用场景及优化策略，NSCT源码为开发者提供了深入理解这些工具的框架。后续文章将探讨rematch v1升级到v2的设计变化以及TypeScript支持的实现，期待与开发者共同探索rematch的最新进展和优化。

没写过复杂 React 组件？来实现下 AntD 的 Space 组件吧

       React 开发者在日常工作中经常编写组件，但这些大多为业务组件，复杂度并不高。

       组件通常通过传入 props 并使用 hooks 组织逻辑来渲染视图，偶尔会用到 context 跨层传递数据。

       相对复杂的组件是怎样的呢？antd 组件库中就有许多。

       今天，我们将实现antd组件库中的一个组件——Space组件。

       首先，我们来了解一下Space组件的使用方法：

       Space是一个布局组件，用于设置组件的间距，还可以设置多个组件的对齐方式。

       例如，我们可以使用Space组件来包裹三个盒子，设置方向为水平，渲染结果如下：

       当然，我们也可以设置为垂直：

       水平和垂直的间距可以通过size属性设置，如large、middle、small或任意数值。

       多个子节点可以设置对齐方式，如start、end、center或baseline。

       此外，当子节点过多时，可以设置换行。

       Space组件还可以单独设置行列的间距。

       最后，它还可以设置split分割线部分。

       此外，你也可以不直接设置size，而是通过ConfigProvider修改context中的默认值。

       Space组件会读取context中的size值，这样如果有多个Space组件，就不需要每个都设置，只需要添加一个ConfigProvider即可。

       这就是Space组件的全部用法，简单回顾一下几个参数和用法：

       Space组件的源码形式使用方法很简单，但功能非常强大。

       接下来，我们来探讨一下这样的布局组件是如何实现的。

       首先，我们来看一下它最终的DOM结构：

       每个box都包裹了一层div，并设置了ant-space-item类。

       split部分包裹了一层span，并设置了ant-space-item-split类。

       最外层包裹了一层div，并设置了ant-space类。

       这些看起来很简单，但实现起来却有很多细节。

       下面我们来写一下Space组件的实现代码：

       首先，我们声明组件props的类型。

       需要注意的是，style是React.CSSProperties类型，即可以设置各种CSS样式。

       split是React.ReactNode类型，即可以传入jsx。

       其余参数的类型根据其取值而定。

       Space组件会对所有子组件包裹一层div，因此需要遍历传入的children并做出修改。

       props传入的children需要转换为数组，可以使用React.Children.toArray方法。

       虽然children已经是数组了，但为什么还要使用React.Children.toArray转换一下呢？

       因为toArray可以对children进行扁平化处理。

       更重要的是，直接调用children.sort()会报错，而toArray之后就不会了。

       因此，我们会使用React.Children.forEach、React.Children.map等方法操作children，而不是直接操作。

       但这里我们有一些特殊的需求，比如空节点不过滤掉，依然保留。

       因此，我们使用React.Children.forEach自己实现toArray：

       这部分比较容易理解，就是使用React.Children.forEach遍历jsx节点，对每个节点进行判断，如果是数组或fragment就递归处理，否则push到数组中。rs源码

       保不保留空节点可以根据keepEmpty的option来控制。

       这样，children就可以遍历渲染item了，这部分是这样的：

       我们单独封装了一个Item组件。

       然后，我们遍历childNodes并渲染这个Item组件。

       最后，我们将所有的Item组件放在最外层的div中：

       这样就可以分别控制整体布局和Item布局了。

       具体的布局还是通过className和样式来实现的：

       className通过props计算而来，使用了classnames包，这是react生态中常用的包，根据props动态生成className基本都会使用这个包。

       这个前缀是动态获取的，最终就是ant-space的前缀。

       这些class的样式都定义好了：

       整个容器使用inline-flex，然后根据不同的参数设置align-items和flex-direction的值。

       最后一个direction的css可能大家没用过，是设置文本方向的。

       这样，就通过props动态给最外层div添加了相应的className，设置了对应的样式。

       但还有一部分样式没有设置，也就是间距。

       其实这部分可以使用gap设置，当然，也可以使用margin，但处理起来比较麻烦。

       不过，antd这种组件自然要做得兼容性好一点，所以两种都支持，支持gap就使用gap，否则使用margin。

       问题来了，antd是如何检测浏览器是否支持gap样式的呢？

       antd创建一个div，设置样式，并添加到body下，然后查看scrollHeight的值，最后删除这个元素。

       这样就可以判断是否支持gap、column等样式，因为不支持的话高度会是0。

       然后antd提供了一个这样的libquic源码hook：

       第一次会检测并设置state的值，之后直接返回这个检测结果。

       这样组件里就可以使用这个hook来判断是否支持gap，从而设置不同的样式了。

       最后，这个组件还会从ConfigProvider中取值，我们之前见过：

       所以，我们再处理一下这部分：

       使用useContext读取context中的值，并设置为props的解构默认值，这样如果传入了props.size就使用传入的值，否则使用context中的值。

       这里给Item子组件传递数据也是通过context，因为Item组件不一定会在哪一层。

       使用createContext创建context对象：

       把计算出的size和其他一些值通过Provider设置到spaceContext中：

       这样子组件就能拿到spaceContext中的值了。

       这里使用了useMemo，很多同学不会用，其实很容易理解：

       props变化会触发组件重新渲染，但有时候props并不需要变化却每次都变，这样就可以通过useMemo来避免它不必要的更新。

       useCallback也是同样的道理。

       计算size时封装了一个getNumberSize方法，为字符串枚举值设置了一些固定的数值：

       至此，这个组件我们就完成了，当然，Item组件还没展开讲。

       先来欣赏一下这个Space组件的全部源码：

       回顾一下要点：

       思路理得差不多了，再来看一下Item的实现：

       这部分比较简单，直接上全部代码了：

       通过useContext从SpaceContext中取出Space组件里设置的值。

       根据是否支持gap来分别使用gap或margin、padding的样式来设置间距。

       每个元素都用div包裹一下，设置className。

       如果不是最后一个元素并且有split部分，就渲染split部分，用span包裹。

       这块还是比较清晰的。

       最后，还有ConfigProvider的部分没有看：

       这部分就是创建一个context，并初始化一些值：

       有没有感觉antd里用context简直太多了！

       确实。

       为什么？

       因为你不能保证组件和子组件隔着几层。

       比如Form和FormItem：

       比如ConfigProvider和各种组件（这里是Space）：

       还有刚讲过的Space和Item。

       它们能用props传数据吗？

       不能，因为不知道隔几层。

       所以antd里基本都是用context传数据的。

       你会你在antd里会见到大量的用createContext创建context，通过Provider修改context值，通过Consumer或useContext读取context值的这类逻辑。

       最后，我们来测试一下自己实现的这个Space组件吧：

       测试代码如下：

       这部分不用解释了。就是ConfigProvider包裹了两个Space组件，这两个Space组件没有设置size值。

       设置了direction、align、split、wrap等参数。

       渲染结果是正确的：

       就这样，我们自己实现了antd的Space组件！

       完整代码在github：github.com/QuarkGluonPl...

       总结：

       一直写业务代码，可能很少写一些复杂的组件，而antd里就有很多复杂组件，我们挑Space组件来写了下。

       这是一个布局组件，可以通过参数设置水平、垂直间距、对齐方式、分割线部分等。

       实现这个组件的时候，我们用到了很多东西：

       很多同学不会封装布局组件，其实就是对整体和每个item都包裹一层，分别设置不同的class，实现不同的间距等的设置。

       想一下，这些东西以后写业务组件是不是也可以用上呢？

history 源码分析

       history库与源码分析

       history库基于html5的history接口，专门用于管理和监控浏览器地址栏的变化。本文将分为两部分进行探讨：html5的history接口；以及history库的实现。

       html5的history接口

       通过使用html的history.pushState(state, title, url)方法，可以实现浏览器地址栏的变更，同时避免页面的刷新。配合ajax请求，这种操作可以实现局部刷新的效果。详细操作方法可以参考MANIPULATING HISTORY FOR FUN & PROFIT这篇文章。此外，若要确保回退按钮也能实现局部刷新，需要监听popstate事件。

       history库的实现

       history库构建了一个虚拟的history对象，它可以用于操作浏览器地址栏的变更、hash路径的变更或管理内存中的虚拟历史堆栈。各history对象都包含以下属性或方法：push(path, state)、replace(path, state)、go、goBack、goForward、block(prompt)和listen((location, action) => { })。

       listen函数会在地址栏变更后执行。实现上，history会先收集历史堆栈入口的变更数据并写入虚拟的history对象中，然后再执行listen函数。这种机制涉及createBrowserHistory、createHashHistory和createMemoryHistory模块中的setState函数。因此，通过pushState、replaceState、go方法，或通过改变location对象来更新地址栏，都可以调用setState执行监听函数。

       监听函数与阻断地址栏变更

       history提供了两种阻断地址栏变更的方法：在变更前拦截和在变更后回滚。对于变更地址栏的三种方式：直接改变location对象、调用pushState或replaceState方法、或使用go方法，前两种我们能知道变更后的值，所以history选择在变更前拦截；后一种我们无法得知变更后的值，因此history选择在变更后回滚。实现上，history使用transitionManager.confirmTransitionTo包裹前两种方法的调用过程，并通过监听popstate和hashchange事件获得变更后的location数据，进一步使用transitionManager.confirmTransitionTo判断是否需要回滚或维持现状。

       transitionManager的机制

       transitionManager由createTransitionManager模块创建，提供四种方法：appendListener(fn)、notifyListeners(...args)、setPrompt(nextPrompt)和confirmTransitionTo(location, action, getUserConfirmation, callback)。这些方法共同协作触发监听函数、阻断地址栏变更。

       不同历史库实现

       本文将详细分析createBrowserHistory、createHashHistory和createMemoryHistory模块。

       createBrowserHistory

       createBrowserHistory基于html5中的pushState和replaceState来变更地址栏。它支持html5 history接口的浏览器，并在不支持时直接修改location.href或使用location.replace方法。此外，它接受props参数，如forceRefresh、getUserConfirmation、keyLength和basename，以控制地址栏变更的细节。

       createHashHistory

       createHashHistory专注于hash路径的变更，实现逻辑与createBrowserHistory类似，但针对hash路径进行专门处理。它接受basename、getUserConfirmation和hashType等属性，以定制hash路径的编码和解码策略。

       createMemoryHistory

       createMemoryHistory在内存中创建一个完全虚拟的历史堆栈，不与真实的地址栏交互，也与popstate、hashchange事件无关。它通过props参数控制初始历史堆栈内容、索引值和路径长度，实现对历史记录的管理。

       工具函数

       文章还介绍了PathUtils、LocationUtils和DOMUtils等工具函数，它们分别用于路径操作、location对象操作以及判断DOM环境。

LaTeX公式：加方框

       在LaTeX中，要为数学公式添加方框，可以使用\boxed{ }命令。这个命令需要包裹在公式中，以实现四周加框的效果。下面是一个示例源码：

       \begin{ equation} \boxed{ \frac{ m^*}{ m}=1+F_1^s} \end{ equation}

       当使用此源码生成文档时，将看到以下方框格式的公式：

       [公式]

webpack之devtool详解

       关于Devtool

       该选项控制是否以及如何生成源映射。官网上给出的可选值有：

       其中一些值适合开发，一些用于生产。对于开发，您通常需要快速的Source Maps，以bundle的大小为代价，但是对于生产，您需要独立的Source Maps，这是精确的，并且支持最小化。

       选择一种源映射样式，以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的选择。不要同时使用devtool选项和插件。devtool选项在内部添加了插件，所以你最终会得到应用两次的插件。

       实例详解

       1.新建print.js

       export default function printMe() { console.log('武昌鱼@');}

       2.新建index.js

       import printMe from './print.js';function component() { var element = document.createElement('div'); var btn = document.createElement('button'); btn.innerHTML = 'Click 1me and check 1the console!'; btn.onclick = printMe; element.appendChild(btn); return element;}document.body.appendChild(component());

       3.新建webpack.config.js

       const path = require('path');const CleanWebpackPlugin = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: ' webpack之devtool' }) ]};

       4.使用不同的devtool选项

       none

       打包后点击打印按钮，console显示main.js:，生成代码如下所示：

       eval

       eval 模式会把每个 module 封装到eval 里包裹起来执行，并且会在末尾追加注释。

       Each module is executed withevaland//@ sourceURL.

       打包之后点击打印按钮，console显示print.js:3，生成代码如下所示：

       source-map

       打包之后你会发现你的 output 目录下多了一个index.js.map文件，此文件记录了sourceMap 行列信息如何映射源代码的信息。点击打印按钮，console显示print.js:3，生成代码如下所示：

       main.js

       main.js.map

       hidden-source-map

       打包后main.js与 source-map 选项相比少了末尾注释，但 output 目录下的 index.js.map 没有少。点击打印按钮，console显示main.js:。

       inline-source-map

       打包后可以看到末尾的注释 sourceMap 作为DataURL的形式被内嵌进了 bundle中，由于 sourceMap 的所有信息都被加到了bundle中，整个 bundle 文件变得硕大无比。点击打印按钮，console显示print.js:3，生成代码如下所示：

       main.js

       eval-source-map

       和 eval 类似，但是把注释里的sourceMap 都转为了 DataURL。console显示print.js?dc:2，生成代码如下所示：

       main.js

       cheap-source-map

       和 source-map 生成结果差不多。output 目录下的index.js内容一样。但是 cheap-source-map 生成的 index.js.map 的内容却比 source-map 生成的 index.js.map 要少很多代码，我们对比一下上文 source-map 生成的 index.js.map 的结果，发现source属性里面少了列信息，如下所示：

       main.js.map

       cheap-module-source-map

       在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；

       总结

       开发环境推荐使用：

       1.eval ：每个模块使用eval()和//@ sourceURL执行。这是非常快。主要缺点是，它没有正确显示行号，因为它被映射到转换代码而不是原始代码(没有来自加载器的源映射)。

       2.eval-source-map：每个模块使用eval()执行，而SourceMap作为DataUrl添加到eval()中。最初它是缓慢的，但是它提供快速的重建速度和产生真实的文件。行号被正确映射，因为它被映射到原始代码。它产生了最优质的开发资源。

       3.cheap-eval-source-map：与eval-source-map类似，每个模块都使用eval()执行。它没有列映射，它只映射行号。它忽略了来自加载器的源代码，并且只显示与eval devtool相似的经过转换的代码。

       4.cheap-module-eval-source-map：类似于cheap-eval-source-map，在本例中，来自加载器的源映射被处理以获得更好的结果。然而，加载器源映射被简化为每一行的单个映射。

       生产环境推荐使用：

       1.(none) ：(省略devtool选项)-不触发SourceMap。这是一个很好的选择。

       2.source-map：一个完整的SourceMap是作为一个单独的文件。它为bundle添加了引用注释，因此开发工具知道在哪里找到它。

       3.hidden-source-map：与source-map相同，但不向bundle添加引用注释。如果您只希望SourceMaps从错误报告中映射错误堆栈跟踪，但不想为浏览器开发工具暴露您的SourceMap，可以使用此选项。

       4.nosources-source-map：一个SourceMap是在没有源代码的情况下创建的。它可以用于在客户机上映射堆栈跟踪，而不暴露所有源代码。您可以将源映射文件部署到webserver。