# Immer 中文教程

URL: https://caijiao.org/immer/
Source: docs/immer/index.md
Description: 详细讲解 Immer 库的使用方法，包括基础概念、高级特性和最佳实践，帮助开发者轻松处理不可变数据。

<div style="display: flex; justify-content: center; margin: 2rem 0;">
  <img src="/images/immer/immer-logo.svg" height="200px" />
</div>

欢迎来到 **Immer 中文教程**。[Immer](https://immerjs.github.io/immer/) 是一个轻量级的 JavaScript 库，它允许你以更简单的方式处理不可变状态。

Immer 获得了 2019 年 "年度突破"[React 开源奖](https://osawards.com/react/)和"最有影响的贡献"[JavaScript 开源奖](https://osawards.com/javascript/)。

## 📖 教程大纲

### 基础篇：核心概念

* **[简介](./guide/introduction)** - 了解 Immer 是什么以及为什么需要它。
* **[安装](./guide/installation)** - 快速安装 Immer 并开始使用。
* **[Produce 函数](./guide/produce)** - 学习 Immer 的核心函数 `produce`。
* **[柯里化 Produce](./guide/curried-produce)** - 掌握 `produce` 的柯里化用法。
* **[React setState 示例](./guide/example-setstate)** - 在 React 中使用 Immer 的最佳实践。
* **[更新模式](./guide/update-patterns)** - 学习各种状态更新模式。

### 进阶篇：高级特性

* **[API 参考](./guide/api)** - 详细了解 Immer 的所有 API。
* **[Map 和 Set](./guide/map-set)** - 使用 Immer 处理 Map 和 Set 数据结构。
* **[数组方法](./guide/array-methods)** - 掌握 Immer 中的数组操作。
* **[复杂对象](./guide/complex-objects)** - 处理嵌套复杂对象的技巧。
* **[Current](./guide/current)** - 了解 `current` 函数的用法。
* **[Original](./guide/original)** - 使用 `original` 函数获取原始对象。
* **[Patches](./guide/patches)** - 学习如何生成和应用补丁。
* **[冻结](./guide/freezing)** - 了解 Immer 的冻结机制。
* **[Return](./guide/return)** - 学习如何在 recipe 中返回新状态。
* **[异步操作](./guide/async)** - 在异步场景中使用 Immer。
* **[TypeScript 支持](./guide/typescript)** - 为 Immer 提供类型支持。

### 资源篇：实践与参考

* **[性能](./guide/performance)** - Immer 的性能表现和优化建议。
* **[常见问题](./guide/faq)** - 解答使用 Immer 时的常见问题。
* **[注意事项](./guide/pitfalls)** - 避免 Immer 使用中的陷阱。
* **[基于 Immer 构建的项目](./guide/built-with)** - 了解使用 Immer 的优秀项目。
* **[支持](./guide/support)** - 如何获得 Immer 的支持。
* **[其他语言](./guide/other-lang)** - 了解 Immer 的多语言支持。

## 🔥 为什么选择 Immer？

* **简化不可变数据处理** - 使用普通 JavaScript 语法修改不可变数据
* **减少样板代码** - 不再需要大量的展开操作符 (`...`)
* **结构共享** - 高效的内存使用，只复制变更的部分
* **自动冻结** - 防止意外修改，提高代码可靠性
* **类型安全** - 良好的 TypeScript 支持
* **极小体积** - 只有 3KB gzip 大小

## 🚀 快速代码演示

### 不使用 Immer

```javascript
const baseState = [
  { title: "Learn TypeScript", done: true },
  { title: "Try Immer", done: false }
]

// 需要手动浅拷贝每一层结构
const nextState = baseState.slice()
nextState[1] = {
  ...nextState[1],
  done: true
}
nextState.push({ title: "Tweet about it" })
```

### 使用 Immer

```javascript
import { produce } from "immer"

const baseState = [
  { title: "Learn TypeScript", done: true },
  { title: "Try Immer", done: false }
]

// 直接修改 draft 对象即可
const nextState = produce(baseState, draft => {
  draft[1].done = true
  draft.push({ title: "Tweet about it" })
})
```

## 📚 相关资源

* [官方文档](https://immerjs.github.io/immer/) - Immer 官方英文文档
* [Egghead 课程](https://egghead.io/courses/immutable-javascript-data-structures-with-immer) - Immutable JavaScript Data Structures with Immer
* [GitHub 仓库](https://github.com/immerjs/immer) - Immer 的源代码仓库