分类: frontend

react fiber 搜罗整理篇

fiber 出台的原委和特性The crux of the change is transitioning from processing updates in a synchronous, recursive way to relying on asynchronous scheduling and prioritization of interface changes. A look insi

umi-plugin-qiankun

umi-plugin-qiankun 基于 qiankun,允许在 umi 环境中创建微服务。 按官方示例,搭建 umi 微服务可基于以下流程实现: 主应用 .umirc.js 添加 @umijs/plugin-qiankun 插件配置 master 内容:注册子应用(应用名、html 地址、路由前缀、路由方式、挂载节点、自定义属性等)、启动沙箱、启动预加载、启动异步渲染等。(备注:子应用也可以

umi 运行时插件

运行原理runtimePlugin 运行时插件也遵循先注册、后使用的流程。运行时插件表现为数组形式,数组项为运行时插件的导出对象。导出对象中的属性可以是函数、或对象、返回对象的 Promise(前者可称为执行类导出,后两者可称为配置类导出,因其用于获取配置项)。umi 包中的 runtimePlugin.js 提供了如下方法: plugins:运行时插件集合。 validKeys:校验 key

qiankun 微服务

qiankun 基于 single-spa、import-html-entry 实现。 启动流程跟 single-spa 一样,qiankun 启动微服务的流程仅有两步: registerMicroApps(apps, lifeCycles?, opts?) 注册应用。 start(opts?) 启动。 qiankun 提供了以下新特性: qiankun 微服务的渲染内容通过 html 脚本

umi 插件钩子机制(修正版)

plugin hook 插件钩子在 umi 内部的表现一为 method 方法,一为 hook 钩子。简单而论,插件钩子运作机制分为两步:register 注册插件钩子、apply 执行插件钩子。插件钩子按 name 命名存入 pluginHooks[name] 中,执行期间以 reduce 机制依次执行并控制入参。以下为 umi 源码注册插件钩子、执行插件钩子的底层方法: register(h

single-spa 实现前端微服务

文档及示例single-spa 具有以下功能特性:在无须刷新页面的前提下,同一个页面可使用不同的框架;基于不同框架实现的前端应用可以独立部署;制作新内容时可以使用不同的框架;支持应用内脚本的懒加载。 single-spa 借鉴了组件生命周期的思想,它为应用设置了针对路由的生命周期。当应用匹配路由/处于激活状态时,应用会把自身的内容挂载到页面上;反之则卸载。典型的 single-spa 由 html

DatePicker

新版的 DatePicker 基于 react-hooks 制作,让我们一步步揭开它的面纱。 DatePicker 分为 Picker 单值选择器、RangePicker 范围选择器两类。 公共模块除了时间处理模块可切换使用 day.js 或 moment 以外。Picker、RangePicker 复用了以下三个组件: PickerTrigger: 抽象了弹层展示逻辑的组件,基于 rc-tri

前端规范

git123456cnpm install -g commitizen # cli 工具cnpm install -g conventional-changelog # 基于 commit message 生成 change logcnpm install validate-commit-msg --save-dev # 检查项目的 commit message 是否符合 Angular 规范。基

聊聊组件库的测试

antdant-design 基于 jest 断言库、enzyme、react-test-renderer 作测试。有文章认为,enzyme 包含 react-test-renderer 的能力,并且以类 jquery 的方式提供了更便捷的 api 操作。 jest 配置: moduleNameMapper:正则到模块名的 map 映射,这些模块将不会被模拟,无论启动自动模拟与否。 transf

jest测试

jest 断言库 支持两种测试模式:功能测试、快照测试。通过添加 babel-jest 依赖以及 babel.config.js 配置,可以在工程中使用 babel 转译 es6 语法或者 ts 语法,可参看 Getting Started。jest 也可以用于使用 webpack 来管理资源、 样式和编译的项目,可参看 Using with webpack。jest 支持的断言方法可参见 Exp