皮皮网

1.Vue Router 源码学习笔记4 - pushState和replaceState的源码实现
2.dayjs源码解析（二）：Dayjs 类
3..netcore有哪些不错的开源项目?
4.我们应该如何优雅的处理 React 中受控与非受控

Vue Router 源码学习笔记4 - pushState和replaceState的实现

       在Vue Router中，HTML5History的模式push和replace操作主要通过util/push-state.js中的相应函数来执行，它们依赖window.history.pushState和window.history.replaceState API。源码对于HTML5History，模式如果浏览器支持，源码就按照标准流程进行，模式jfinal案例源码插入即利用pushState或replaceState改变浏览器的源码历史记录，而不会导致页面刷新。模式

       对于HashHistory，源码浏览器支持与否对操作方式有影响。模式若支持，源码同样采用类似方法，模式通过pushState设置hash部分，源码replaceState则调用window.location.replace替换当前URL。模式然而，源码如果浏览器不支持pushState，会直接操作window.location更改URL，以#符号为标志。

       MDN文档中提到，pushState需要三个参数：状态对象、标题（通常忽略）和可选的URL。而replaceState与pushState类似，只是替换当前历史项，而非新增，尽管它会在浏览器历史中生成新的delphi excel 源码记录。

       当路由更改后，紧接着是视图的同步更新。详细了解这两个方法的使用，可以参考MDN文档：developer.mozilla.org/zh-CN/docs/Web/API/History/pushState。

       继续深入学习，确保在实际项目中正确运用这些原理，实现无缝的路由切换。

dayjs源码解析（二）：Dayjs 类

       上篇文章讲述了dayjs的基础知识、locale、constant和utils，本文将继续深入解析dayjs的核心部分——src/index.js中的Dayjs类。

       src/index.js文件结构清晰，按照以下步骤构建：

       然而，这里存在两个疑问，可能是为了缩减代码体积，由@iamkun提出。

       现在开始正式分析代码。

       locale相关全局定义

       首先默认导入了locale/en.js英文的locale，然后使用L存储当前使用的locale名字，使用Ls（locale Storage）存储locale对象。

       工具补充

       定义了一个工具方法parseLocale。这个方法处理以下几种情况：

       然后将定义好的parseLocale方法补充到Utils中。

       相关方法

       在Dayjs类中，关于locale的校讯通 源码方法有两个，实例私有方法$locale用来返回当前使用的locale对象；实例方法locale本质上就是调用了parseLocale方法，但最后返回的是新的改变了locale的Dayjs实例。

       注意：在dayjs中，许多操作都使用clone()方法来返回新的Dayjs实例，这也是这个库的优点之一。

       最后同样将parseLocale方法补充到Dayjs类的静态方法中。

       补充Utils

       上一节和前文中已经分析了一些Util工具，这里将其补充完整：

       注意：这些工具方法没有统一定义在utils.js文件中的原因是用到了index.js作用域中的一些变量。

       需要特别关注的是wrapper方法，在Dayjs类中大量应用了该方法，其实是通过date和原实例封装了一个新实例，新实例和原实例的主要区别就是关联的时间不同。

       Dayjs类

       Dayjs类是整个dayjs库的核心，可以给其定义的实例方法分类，也可以查看官网的文档分类。

       解析都写在了代码的注释里：

       原型链

       通常来说，定义在实例中的方法应该在原型链上，但有几个与时间有关的setter/getter方法相似，所以单独将原型链写在了上面。

       这几个方法都是不传参数时为getter，传参数时为setter。

       静态属性

       还有一些方法和属性挂在了dayjs函数对象上，最核心的是加载插件和加载locale的方法，几个方法的截图软件源码用法都能在官方文档中找到。

       如果对dayjs函数对象、Dayjs类和原型的关系感到困惑，可以参考下图，最后形成的关系如下图所示：

       总结

       如果不看插件部分，dayjs库的核心已经解析完成，看一下默认生成dayjs实例长什么样子：

       实例本身的属性是一些与时间相关的属性，各种操作方法都在原型__proto__上。

       本节结束，下一节将开始解析dayjs的插件。

.netcore有哪些不错的开源项目?

       以下为推荐的几个.NET Core开源项目：

       1. Masuit.Tools

       这是一个包含了加密解密、反射操作、硬件信息、日期时间扩展等常用封装的开源项目。其开源协议规定，一旦因违反劳动法的公司使用该项目，项目作者有权追讨使用费或不允许使用包含该项目的源代码。项目特色功能包括Socket客户端操作类、模板引擎、任意进制转换、DateTime扩展及反射操作。

       2. OrchardCore

       OrchardCore 是使用 ASP.NET Core 构建的开源模块化、多租户应用程序框架，同时也是内容管理系统（CMS）的基础。它有两个项目，yy 影院源码其中一个是 Fur，适用于.NET 5 平台的入门级、快速开发的 Web 应用框架。强调“六极”设计思想，易于入门、极速开发、极少依赖、极少配置、极其灵活、易于维护。此外，它结合了敏捷开发模式，用户能在冲一杯咖啡的时间内完成工作。Fur框架的特色功能包括支持.NET 5的新功能、六级架构设计和敏捷开发模式等。

       3. awesome-dotnet-core

       这个集合包含了.NET Core开源项目的库、工具、框架、模板引擎、身份认证、数据库、ORM框架、处理、文本处理、机器学习、日志、代码分析、教程等资源。

       4. ZKEACMS

       ZKEACMS 是一个基于ASP .Net Core开发的免费内容管理系统，提供了可视化编辑设计，支持直接在预览页面设计网页，以拼图方式构建网站。它采用跨平台设计，适用于Windows、MAC OS、Linux、Docker等环境。

       5. YiShaAdmin

       YiShaAdmin 是一个基于.NET Core Web开发的快速开发平台，提供了代码生成器，能够减少%以上的编码工作量，提高开发效率，节省项目研发成本和开发周期。它使用了Bootstrap、ASP.NET Core、Entity Framework Core等技术。

       6. .NET Core源码

       这是C#开源项目中的推荐，包含.NET Core源代码。

       7. Util应用框架

       Util是一个.NET Core平台下的应用框架，旨在提升小型团队的开发输出能力。它由常用公共操作类、分层架构基类、UI组件、第三方组件封装、第三方业务接口封装、代码生成模板、权限等功能组成。

       8. OSharp

       OSharp 是一个基于.NETStandard2.x的快速开发框架，使用了最新的.NETCore SDK，对 AspNetCore 进行了更高级的封装，并提供了一套规范的业务实现代码结构与操作流程，易于实际项目开发。

       9. XBlog

       这是个人博客系统，提供了技术要点和功能。

       . FreeSql

       FreeSql 是一个强大的对象关系映射技术（O/RM），支持.NETCore 2.1+或.NETFramework 4.0+或Xamarin等平台。

       . Autofac

       经典的依赖注入（DI）框架，适用于Microsoft .NET，管理类之间的依赖关系，使应用程序在大小和复杂性增长时易于更改。

       . OpenAuth.Core

       一个快速应用开发框架和权限管理工作流系统，基于经典领域驱动设计，提供组织机构、角色用户、权限授权、表单设计、工作流等功能。

       . Abp.VNext.Hello

       这是ABP框架的示例项目，具备分层和模块化结构，包含授权、验证、异常处理、日志、数据库连接管理、设置管理、审计日志等特性。

       以上项目涵盖了从基础工具到高级框架的多个类别，适合不同开发者需求。

我们应该如何优雅的处理 React 中受控与非受控

       了解了 React 中受控与非受控的基本概念后，我们来聊聊 rc-util 中的 useMergedState Hook。这个 Hook 旨在为开发者提供灵活的表单控件处理方式，支持受控与非受控两种模式。

       useMergedState 的主要作用在于，允许开发者基于多层属性传递给底层表单控件，提供受控和非受控两种处理方式，以适应不同场景的需求。例如，Ant-Design 中的 Input 组件即可同时接收 value 和 onChange 的组合方式，以及单独的 defaultValue 实现非受控状态。

       实现这个功能的核心在于处理输入值的传入逻辑，确保无论外部传入的是 value 还是 defaultValue，内部都以受控状态处理。当外部传入 defaultValue 时，组件表现为非受控状态，而 value 则确保了受控状态的实现。

       为解决 Warning 警告问题，我们对 TextField 组件进行了改造，确保无论传入 value 还是 defaultValue，都能满足两种状态的需求。使用 useMergedState Hook，内部 state 通过受控方式处理，同时外部传入的值根据需要分别作为 value 和 defaultValue。

       在 useMergedState 的源码中，初始化逻辑与自定义的逻辑基本一致，使用 useState 初始化状态。同步阶段处理外部传入的值更新 state，而更新阶段通过 changeEventPrevRef 保持对 prevValue 的正确引用，确保正确触发 onChange 事件。

       通过 useEvent 包裹 onChange 函数，确保在 ReRender 时直接调用 fnRef.current，避免重新生成 onChange 定义。setState 方法额外接收 ignoreDestroy 参数，避免状态被销毁后仍被调用，优化内存使用。

       批处理更新处理中，changeEventPrevRef 作用于非受控状态，确保在多次 patch 更新后仍然能获取正确的 prevValue，从而正确触发 onChange 事件。最终，当 mergedValue 的值更新时，会触发对应使用 LayoutEffect 的操作，确保状态更新逻辑的正确执行。

       通过 useMergedState，我们能够灵活地在受控与非受控两种模式间切换，以适应不同场景的需要。这种设计不仅简化了组件的使用，同时也提供了更高的灵活性和兼容性。在日常开发中，合理运用 this Hook 可以有效提升表单处理的效率和用户体验。