React Three Fiber vs Three.js React Three Fiber（以下称 R3F） 实际上是如何工作的？也许你有很好的 Three.js 基础，但将其引入 React 一直是一个挑战。或者你像我一样有 React 背景，但发现 Three.js 世界有点难以理解——阅读本教程就对了。本文将带你一对一地构建 Three.js 页面和 R3F 页面，并了解它们背后的工作原理。

使用 Immer Immer 是一个 JavaScript 库，用于简化处理不可变数据的操作。它的目标是使数据的修改过程更加直观和易于理解，同时保持不可变性的特性。传统上，处理不可变数据需要进行大量的手动操作，例如深层复制对象、创建新的数组副本等。这样的操作不仅繁琐，而且容易出错。Immer 的出现解决了这个问题。

TypeScript 重构 TypeScript 重构是一个很大的话题，很难三言两语说得清楚。下面以一个简单的 React 开发的计数器应用来谈一谈怎样使用 TypeScript 循序渐进的重构 React 应用，怎样更好的使用 TypeScript 类型系统让重构更“丝滑”。

Vite React 项目中使用 JavaScript 先前的 React 项目是基于 CRA + JavaScript的，直接在 js 中书写 jsx 语法。最近将一个 这样的项目迁移到 Vite 2，结果测试时发现，使用 Vite 启动时就会抛出一堆问题，看过 Vite 官方文档的故障排除也没有提及此类问题。

怎样不输出 CRA 工程的 sourceMap 文件 使用 Create React App 创建的单页应用生产环境下默认会使用 sourceMap 文件，这些文件一般很大，最好不要将它们部署到服务器上。当然，我们可以手动删除已经输出的文件，高级一点还可以使用一个 node 程序来批量删除。但能不能简单一点，通过 webpack 不输出 sourceMap 文件呢？Create React App 这个工具链是官方推荐的的最佳方式，不过默认下它隐藏了 Webpack，无法直接修改配置，因此我们想自定义一些配置比较麻烦。目前能自定义的方式主要有：一、使用 eject在 package.json 中很容易找到该命令，运行该命令会还原 react-scripts 隐藏的 Webpack 配置，通过 Webpack 配置文件我们就可以随心所欲地自定义了。注意，该过程是不可以逆的，会生成很多工程文件。小心使用为妙！二、使用 config-overrides.js这是一种通过覆盖 webpack 原有默认配置的方式一定来自定义的方式。1. 安装依赖npm i -D react-app-rewired customize-cra2. 修改 package.json 脚本"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-scripts test --env=jsdom" ... }3. 设置 config-overrides.js比如我们要在生产环境不输出 sourceMap 文件，可以在项目的根目录下新建 config-overrides.js，然后这样定义：const { override } = require('customize-cra'); module.exports = override( (() => (config, env) => { if (env === 'production') { config.output.publicPath = ''; config.devtool = false; } return config; })() )运行 npm run build 后会发现，确实不会输出 js 的 sourceMap 文件，但 CSS 的 sourceMap 文件依然照输不误。尝试使用 customize-cra 插件的其它方法也无功而返。直到我仔细阅读了 Create React App 文档，最终找到了办法。三、使用 .env项目的根目录下新建 .env.production，该文件只对生产环境有效，然后这样定义：GENERATE_SOURCEMAP = false运行 npm run build 后，JavaScript、CSS 的 sourceMap 文件都不会输出。一切都安静了，真好！参考https://create-react-app.dev/docs/advanced-configuration