安装
Immer 可以作为直接依赖项安装:
- Yarn:
yarn add immer - NPM:
npm install immer - Deno:
deno install immer - CDN: 暴露的全局变量是
immer- Unpkg:
<script src="https://unpkg.com/immer"></script> - JSDelivr:
<script src="https://cdn.jsdelivr.net/npm/immer"></script> - ⚠️ 使用 CDN 时,最好检查浏览器中的 url 并查看它解析为哪个版本,这样当更新发布时,您的用户不会意外地获得更新的版本。因此,请改用如下网址:https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js 。在 URL 中将 production.min 替换为 development 以进行开发构建。
- Unpkg:
选择您的 Immer 版本
本节仅适用于版本 6 及更高版本
为确保 Immer 尽可能小,并非每个项目都需要的功能已选择加入,并且必须明确启用。这可确保在将您的应用程序捆绑用于生产时,未使用的功能不会占用任何空间。
可以选择加入以下功能:
| 功能 | 描述 | 调用方法 |
|---|---|---|
| 数组方法优化 | 优化数组方法的处理,提升大量数组操作的性能 | enableArrayMethods() |
| ES2015 Map and Set 支持 | 要使 Immer 能够对原生 Map 和 Set 集合进行操作,请启用此功能 | enableMapSet() |
| JSON 补丁 支持 | Immer 可以跟踪您对 draft 对象所做的所有更改。这对于使用 JSON 补丁时传达更改很有用 | enablePatches() |
例如,如果您想在 Map 上使用 produce ,则需要在应用程序启动期间启用此功能一次:
// 在你的应用程序入口文件
import {enableMapSet} from "immer"
enableMapSet()
// ...然后
import {produce} from "immer"
const usersById_v1 = new Map([
["michel", {name: "Michel Weststrate", country: "NL"}]
])
const usersById_v2 = produce(usersById_v1, draft => {
draft.get("michel").country = "UK"
})
expect(usersById_v1.get("michel").country).toBe("NL")
expect(usersById_v2.get("michel").country).toBe("UK")
基础版 Immer 经 gzip 压缩后约为 3 KB。每启用一个插件,大小约增加 1–2 KB。具体如下:
Import size report for immer:
┌───────────────────────┬───────────┬────────────┬───────────┐
│ (index) │ just this │ cumulative │ increment │
├───────────────────────┼───────────┼────────────┼───────────┤
│ import * from 'immer' │ 6908 │ 0 │ 0 │
│ produce │ 4183 │ 4183 │ 0 │
│ enableMapSet │ 4971 │ 4980 │ 797 │
│ enablePatches │ 5335 │ 6097 │ 1117 │
│ enableArrayMethods │ 4768 │ 6659 │ 562 │
└───────────────────────┴───────────┴────────────┴───────────┘
(this report was generated by npmjs.com/package/import-size)
Immer 使用在旧的 JavaScript 环境?
默认情况下,produce 尝试使用代理以获得最佳性能。但是,在较旧的 JavaScript 引擎上,代理不可用。例如,在 Android 上运行 Microsoft Internet Explorer 或 React Native(如果 React Native < v0.59 或在 React Native < v0.64 上使用 Hermes 引擎)时。在这种情况下,Immer 将回退到与 ES5 兼容的实现,其工作方式相同,但速度稍慢
- 从版本 6 开始,必须通过调用
enableES5()显式启用对回退实现的支持 - 从版本 10 开始,Immer 完全移除了备用实现,因此不能在不支持
Proxy的浏览器或 JavaScript 引擎中使用。