React 原理浅析
前言
强烈推荐这篇文档 Build your own React ！！！有动画和解释，能更好地理解 React 的原理
也可以参考：React 核心原理浅析
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云！
相关推荐
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 存储数据大小...
2023-07-06
实现 React、Vue3 的动态路由
后端说明 简单说一下常见的 RBAC (Role Based Access Control) 模型，主要是由 User、Role、Resource 三个表组成，如图所示: User 表存储用户信息，Role 表存储角色信息，Resource 表存储资源信息，User 和 Role 是多对多的关系，Role 和 Resource 是多对多的关系，通过 UserRole 和 RoleResource 两张中间表来实现多对多的关系，UserRole 表存储 User 和 Role 的关系，RoleResource 表存储 Role 和 Resource 的关系 流程 用户登录之后得到用户 Id user_id 在 user_role 表中 根据 user_id 得到对应的角色 role_id 在 role_resource 表中 根据 role_id 得到对应的资源 resource_id 列表 在 resource 表中 根据 resource_id 得到对应的 resource, 最后组合成列表就是用户拥有的资源 示例一 后端返回处理好的树形结构的数据 1234...
2024-03-10
前端常见的文件操作
记录一下工作中用到的文件操作 文件的预览微软的在线预览功能 注意: 文件需要能够公开访问 1234567// 前缀: https://view.officeapps.live.com/op/view.aspx?src=// url: 文件地址window.open( `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent( url )}`); 使用微软的在线预览功能预览文件 Word https://view.officeapps.live.com/op/view.aspx?src=https://cdn.zxiaosi.com/hexo/office/temp.docx Excel https://view.officeapps.live.com/op/view.aspx?src=https://cdn.zxiaosi.com/hexo/office/temp.xlsx PPT https://view.officeapps.live.com/op/...
2024-12-19
模块联邦 (Vite)
模块联邦 什么是模块联邦？模块联邦是 Webpack 5 的新特性，它允许不同的应用或组件之间进行动态的模块共享。 为什么要使用模块联邦？模块联邦可以解决多个应用或组件之间的依赖问题，避免重复安装依赖，提高开发效率。 Webpack Module Federation 项目地址项目目录123456789101112131415161718├── 根目录 ├── packages ├── host # host 项目 ├── src ├── App.tsx ├── vite-env.d.ts ├── vite.config.ts ├── remote # remote 项目 ├── src ├── components ├── CustomButton ├── index.tsx ├── index.ts ├── App.tsx ├── ...
2025-08-03
Qiankun 常见问题
Qiankun-Vite 插件 Qiankun 默认不能接入 Vite ，需要使用 vite-plugin-qiankun 插件，但是这个插件目前不支持 Qiankun的样式隔离 和 React的热更新 使用 vite-plugin-qiankun 插件，可以配合浏览器插件 React Developer Tools 实现热更新 推荐使用 vite-plugin-qiankun-lite 插件，解决了上面的问题，并且简化了配置 Node 版本问题 Node 16 使用 vite-plugin-qiankun 插件启动时会报错 ReferenceError: ReadableStream is not defined，需要更改 cheerio 的版本（注意不要带 ^ 符号），详见：cheerio upgrade problem 123"devDependencies": { "cheerio": "1.0.0-rc.12"} Node 16 使用 Vite 时，也需要更改版本（其他版本也可自...
2025-09-25
Vite 模板语法
场景 当一套代码，需要发布到两个环境（ A环境 和 B环境 ）中时，A环境 下需要系统管理页面，B环境 下不需要系统管理页面。这时，我们可以通过后端返回的菜单控制。 但是如果 A环境 和 B环境 的登录页面也不一样呢？这时，我们就可能需要模板语法来控制。 需要自定义一个 vite 插件，在打包前，读取环境变量，然后使用 blueimp-tmpl 的模板语法对代码进行判断并替换。 项目地址实践安装依赖 blueimp-tmpl 模板语法 1npm install blueimp-tmpl cross-env 跨环境执行命令 1npm install cross-env -D 获取环境变量 在 package.json 文件中添加 scripts 脚本 12345678"scripts": { "dev": "npm run dev:A", "dev:A": "cross-env platform=A vite", "dev:B": &q...
评论
