React 原理浅析
前言
强烈推荐这篇文档 Build your own React ！！！有动画和解释，能更好地理解 React 的原理
也可以参考：React 核心原理浅析
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云！
相关推荐
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 ├── ...
2023-06-29
使用 useSWR + Axios 封装 React 请求
前提 因为 React18 的 React.StrictMode (严格模式)，组件会在开发环境下执行两次，但是在生产环境下，只执行一次. 所以在 useEffect 写请求就不再合适。 关于 useSWR 关于 React.StrictMode 示例代码 封装 Axios请求响应拦截器(错误抛出的弹窗，自定义处理)1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374// 请求拦截器(全局配置)axios.interceptors.request.use( (config: any) => { // 这里可以做一些请求拦截，比如请求头携带 token // @ts-ignore (防止下面报错) // config.headers.Authorization = localStorage.getItem(&quo...
2025-06-17
Qiankun 打包优化
文章参考下面两个 issues：提取公共依赖 doc、qiankun 如何复用公共依赖 思路 方式一：通过 CDN 引入公共依赖，并在 主子应用 中排除这些公共依赖。（如果 CDN网站 挂了，网站也就挂了，有风险） 方式二：将 CDN 资源下载到 public 文件夹下，并在 主子应用 中排除这些公共依赖 一般来说，只需要在 主应用 中引入即可，子应用 会复用主应用的资源，这个时候子应用单独访问（直接通过 http://localhost:8001/ 访问，而不是主应用路由点击）会报错，因为缺少依赖 如果需要 子应用 可以单独访问（直接通过 http://localhost:8001/ 访问，而不是主应用路由点击），那么也需要在 子应用 中引入，需要用到 ignore 关键字 项目地址创建项目初始化项目 项目目录结构 12345678910111213141516171819202122232425262728|── 项目根目录│ ├── packages # 包目录│ │ ├── app ...
2025-11-30
微前端SDK@0.5
路线规划 规划图地址 更多详情 快速开始1234# 安装 @zxiaosi/sdk 对应的版本 0.5.xnpm install -g @zxiaosi/create-sdknpx create-sdk 提示 所有模板都排除了 react-dom，这将导致 HMR 失败。请安装 React 开发者工具. 项目介绍 整个 SDK 都是围绕 getRoutesApi、getUserInfoApi 这两个接口进行设计的，旨在简化微前端应用的开发 getRoutesApi 接口用于获取应用路由信息，包括主应用和微应用的路由配置。因为 Qiankun 的 entry 配置比较特殊，所以 主应用 需要使用 vite-plugin-mock 插件 mock 接口 在本地开发是本地服务 "entry": "http://localhost:5174" 在生产环境是文件路径 "entry": "/subapp/" getUserInfoApi 接口用于获取用户相关数据，以便进行权限控制和个性化设置。...
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-04-23
React Compiler
React Compiler React Compiler 是目前在 RC 中的一个新编译器，会自动记住你的代码，避免忘记或者错误的使用 useMemo、useCallback、React.memo 等 React 的 API 项目地址创建 React Compiler 应用新建一个项目1234567891011# 通过 vite 创建项目npm create vite@latest# Project name:react-compiler# Select a framework:React# Select a variant: (这里一定要选择 TypeScript, 因为 TypeScript+SWC 还没有适配)TypeScript 安装配置依赖 安装 babel-plugin-react-compiler 和 eslint-plugin-react-hooks 12npm install --save-dev --save-exact babel-plugin-react-compiler@rcnpm install --save-dev eslint-plugin-...
评论
