React 原理浅析
前言
强烈推荐这篇文档 Build your own React ！！！有动画和解释，能更好地理解 React 的原理
也可以参考：React 核心原理浅析
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云！
相关推荐
2023-12-20
React 实现常见的拖拽组件
代码地址 可伸缩侧边栏 /src/components/resizeBox 手写拖拽 Modal 组件 /src/components/dragModal 使用 dnd-kit 实现拖拽组件 /src/components/dndkit 使用 dnd-kit 实现嵌套可拖动菜单 /src/components/dndkitMenu 功能演示 参考文章：【鸣谢】 Dndkit Arco Design Ant Design React 最佳实践：可拖拽侧边栏
2024-10-23
Umi 实现微前端
建议阅读 Umi 微前端，了解 微前端 的基本使用 介绍 Lerna 是一个快速、领先的构建系统，用于管理和发布来自同一源码仓库的多个 JavaScript/TypeScript 软件包 Umi 企业级前端开发框架，它提供了一套完整的 Web 应用开发解决方案，包括路由、状态管理、数据请求、页面布局、主题定制等功能 项目地址实践包版本 node: 18.20.7 npm: 10.8.2 lerna: 8.1.8 umi: 4.4.0 项目目录12345678910111213141516171819├── 根目录 |── packages # 项目目录, 名称要跟 package.json 中 workspaces 以及 lerna.json 中 packages 一致 |── app # 主应用app |── src |── .umi # 动态生成的文件夹 |── .env # 配...
2025-06-17
Qiankun 打包优化
文章参考下面两个 issues：提取公共依赖 doc、qiankun 如何复用公共依赖 思路 方式一：通过 CDN 引入公共依赖，并在 主子应用 中排除这些公共依赖。（如果 CDN网站 挂了，网站也就挂了，有风险） 方式二：将 CDN 资源下载到 public 文件夹下，并在 主子应用 中排除这些公共依赖 一般来说，只需要在 主应用 中引入即可，子应用 会复用主应用的资源，这个时候子应用单独访问（直接通过 http://localhost:8001/ 访问，而不是主应用路由点击）会报错，因为缺少依赖 如果需要 子应用 可以单独访问（直接通过 http://localhost:8001/ 访问，而不是主应用路由点击），那么也需要在 子应用 中引入，需要用到 ignore 关键字 项目地址创建项目初始化项目 项目目录结构 12345678910111213141516171819202122232425262728|── 项目根目录│ ├── packages # 包目录│ │ ├── app ...
2025-10-23
前端监控方案
常见监控方案 Sentry：一个开源的、实时的错误监控平台。功能全面、一站式解决方案、多端支持。强烈推荐！！！ Web-See：前端监控 SDK，可用来收集代码报错、性能数据、页面录屏、用户行为、白屏检测等个性化指标数据并上报。支持多种错误还原方式：定位源码、播放录屏、记录用户行为 WebTracing：一个基于 JavaScript 的埋点 SDK。为你的前端项目提供【 行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段 演示地址项目实践思路 优先看 Web-See 文档 使用 Vite + React 创建项目，复刻 Web-See-Vue-Demo 不上报错误，把报错信息存储到 IndexDB 中，通过 idb-keyval 操作 IndexDB 线上出现问题时，下载 IndexDB 中的数据，在后台管理平台中导入并查看问题 项目介绍 从 项目地址 拉取示例代码，通过 pnpm install 安装依赖 核心文件是 src/monitor，里面封装了写入数据到 IndexDB 的方法，以及下载数据到本地的方法 由于 IndexDB 存储数据大小...
2025-11-30
微前端SDK
路线规划 规划图地址 项目介绍 整个 SDK 都是围绕 getRoutesApi、getUserInfoApi 这两个接口进行设计的，旨在简化微前端应用的开发 getRoutesApi 接口用于获取应用路由信息，包括主应用和微应用的路由配置。因为 Qiankun 的 entry 配置比较特殊，在本地开发时是本地服务 "entry": "http://localhost:5174"，在生产环境是文件路径 "entry": "/subapp/"，所以 主应用 需要使用 vite-plugin-mock 插件 mock 接口 getUserInfoApi 接口用于获取用户 user、权限 permissions、角色 role、配置信息 setting，以便进行权限控制和个性化设置。理论上来说 permissions 中应当包含 getRoutesApi 中的所有的路由路径，否则页面出走 <NotPermission /> 组件。（目前的方案是所有的组件手动包一层 <NotPer...
2024-11-13
Qiankun + Vite 多个子应用共存
介绍 最初接触 umi 微前端 时，感觉这个就是两种子应用的加载方式 路由匹配方式 手动加载方式 后来在网上看到大佬的发的这个文章 探索微前端的场景极限，才发现这个实现不简单，引用了大佬的话： 在应用 A 中通过调用 loadMicroApp(B) 的方式唤起微应用 B，然后在微应用 B 中通过 loadMicroApp(C) 的方式唤起微应用 C，通过这样的调用链路即可很完美的完成产品上的诉求。 但是现实情况往往没有那么简单，前面提到过，若想要 loadMicroApp API 能符合预期的运行，我们需要确保被加载的微应用是不含自己的路由系统，否则会出现多个应用间路由系统互相 抢占/冲突 的情况。 这种场景下，我们其实只需要确保微应用的路由系统不会干扰到全局的 URL 系统即可。幸运的是 react-router 的 memory history 模式很好的解决了这一问题。 思路 主应用 app 有链接两个子应用 app1 和 app2 子应用 app1 可以通过 loadMicroApp(app1) 的方式打开子应用 app2 仓库地址项目搭建...
评论
