React 原理浅析
前言
强烈推荐这篇文档 Build your own React ！！！有动画和解释，能更好地理解 React 的原理
也可以参考：React 核心原理浅析
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云！
相关推荐
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-05-25
React Flow
React Flow React Flow 一个可定制的 React 组件，用于构建基于节点的编辑器和交互式图表 官网提供了大量示例，以及在线演示。建议看完每个示例，很有用！！！ 其他参考：Vue Flow 代码地址在线演示 自动布局示例 参考官网示例：Dagre Tree 使用 Dagre 时注意事项 Dagre 布局算法需要指定节点的宽和高，否则会报错 @dagrejs/dagre v1.1.4 在老版浏览器 (eg: chromev89.0.4389.90) 会报 Object.hasOwn is not a function 错误，降级为 @dagrejs/dagre v1.1.3 即可解决 官网示例下面有公开的代码，此处不再贴出代码 复制粘贴示例 参考官网示例：Copy and Paste 可以仿照例子，当节点被选中时，再出现粘贴功能。核心代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525...
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-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...
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/...
2023-11-29
React 使用 Tinymce 富文本
感谢 TinyMCE 中文文档中文手册 提供的文档支持。 常见功能代码地址功能演示 使用本地方式引入(跳过 API Key) 在 社区版 下载对应版本的压缩包 解压后将 tinymce 文件夹放到项目的 public 文件夹下 在 src/components/CustomEditor/index.tsx 中找到 tinymceScriptSrc，然后引入本地的 tinymce 文件 1234567<Editor ..., init={{ ..., tinymceScriptSrc={'/tinymce/tinymce.min.js'} }}/> 注意: 一定要放在 public 文件下，否则会被打包，导致找不到文件 下载语言包 在 语言包下载地址 找到需要的语言包并下载 解压后将 langs 文件夹放到项目的 public 文件夹下 在 src/components/CustomEditor/index.tsx 中找到 language，填上对应的语...
评论
