Immer 是什么？

Immer 是一个不可变数据的 Javascript 库，让你更方便的处理不可变数据。

什么是不可变数据？

不可变数据概念来源于函数式编程。函数式编程中，对已初始化的“变量”是不可以更改的，每次更改都要创建一个新的“变量”。

Javascript 在语言层没有实现不可变数据，需要借助第三方库来实现。Immer 就是其中一种实现（类似的还有 immutable.js）。

为什么使用不可变数据？

在 React 性能优化一节中用了很长篇幅来介绍 shouldComponentUpdate，不可变数据也是由此引出。使用不可变数据可以解决性能优化引入的问题，所以重点介绍这一部分背景。

React 中的性能优化

避免调停（Avoid Reconciliation）

当一个组件的 props 或 state 变更，React 会将最新返回的元素与之前渲染的元素进行对比，以此决定是否有必要更新真实的 DOM。当它们不相同时，React 会更新该 DOM。虽然 React 已经保证未变更的元素不会进行更新，但即使 React 只更新改变了的 DOM 节点，重新渲染仍然花费了一些时间。在大部分情况下它并不是问题，不过如果它已经慢到让人注意了，你可以通过覆盖生命周期方法 shouldComponentUpdate 来进行提速。该方法会在重新渲染前被触发。其默认实现总是返回 true，让 React 执行更新：

shouldComponentUpdate(nextProps, nextState) {
  return true;
}
复制代码

如果你知道在什么情况下你的组件不需要更新，你可以在 shouldComponentUpdate 中返回 false 来跳过整个渲染过程。其包括该组件的 render 调用以及之后的操作。

shouldComponentUpdate 的作用

这是一个组件的子树。每个节点中，SCU 代表 shouldComponentUpdate 返回的值，而 vDOMEq 代表返回的 React 元素是否相同。最后，圆圈的颜色代表了该组件是否需要被调停（Reconciliation）。

对于 C1 和 C3，shouldComponentUpdate 返回了 true，所以 React 需要继续向下查询子节点。这里 C6 的 shouldComponentUpdate 返回了 true，同时由于 render 返回的元素与之前不同使得 React 更新了该 DOM。

最后一个有趣的例子是 C8。React 需要调用这个组件的 render，但是由于其返回的 React 元素和之前相同，所以不需要更新 DOM。

显而易见，你看到 React 只改变了 C6 的 DOM。对于 C8，通过对比了渲染的 React 元素跳过了真实 DOM 的渲染。而对于 C2 的子节点和 C7，由于 shouldComponentUpdate 使得 render 并没有被调用。因此它们也不需要对比元素了。

示例

上一小节有一个有趣的例子 C8，它完全没有发生改变，React 却还是对它进行了调停（Reconciliation）。我们完全可以通过条件判断来避免此类问题，避免调停（Reconciliation），优化性能。

如果你的组件只有当 props.color 或者 state.count 的值改变才需要更新时，你可以使用 shouldComponentUpdate 来进行检查：

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}
复制代码

在这段代码中，shouldComponentUpdate 仅检查了 props.color 或 state.count 是否改变。如果这些值没有改变，那么这个组件不会更新。如果你的组件更复杂一些，你可以使用类似“浅比较”的模式来检查 props 和 state 中所有的字段，以此来决定是否组件需要更新。React 已经提供了一位好帮手来帮你实现这种常见的模式 - 你只要继承 React.PureComponent 就行了（函数组件使用 React.memo）。所以这段代码可以改成以下这种更简洁的形式：

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}
复制代码

但 React.PureComponent 只进行浅比较，所以当 props 或者 state 某种程度是可变的话，浅比较会有遗漏，那你就不能使用它了。比如使用了数组或对象：（以下代码是错误的）

class ListOfWords extends React.PureComponent {
  render() {
    return <div>{this.props.words.join(',')}</div>;
  }
}

class WordAdder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      words: ['marklar']
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 这部分代码很糟，而且还有 bug
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick} />
        <ListOfWords words={this.state.words} />
      </div>
    );
  }
}
复制代码

words 数组使用 push 方法添加了一个元素，但 state 持有的 words 的引用并没有发生变化。push 直接改变了数据本身，并没有产生新的数据，浅比较无法感知到这种变化。React 会产生错误的行为，不会重新执行 render。为了性能优化，引入了另一个问题。

不可变数据的力量

避免该问题最简单的方式是避免更改你正用于 props 或 state 的值。例如，上面 handleClick 方法可以用 concat 重写：

handleClick() {
  this.setState(state => ({
    words: state.words.concat(['marklar'])
  }));
}
复制代码

或者使用 ES6 数组扩展运算符：

handleClick() {
  this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));
};
复制代码

但是当处理深层嵌套对象时，以 immutable（不可变）的方式更新它们令人费解。比如可能写出这样的代码：

handleClick() {
  this.setState(state => ({
    objA: {
      ...state.objA,
      objB: {
        ...state.objA.objB,
        objC: {
          ...state.objA.objB.objC,
          stringA: 'string',
        }
      },
    },
  }));
};
复制代码

我们需要一个更友好的库帮助我们直观的使用 immutable（不可变）数据。

为什么不使用深拷贝/比较？

深拷贝会让所有组件都接收到新的数据，让 shouldComponentUpdate 失效。深比较每次都比较所有值，当数据层次很深且只有一个值变化时，这些比较是对性能的浪费。

视图层的代码，我们希望它更快响应，所以使用 immutable 库进行不可变数据的操作，也算是一种空间换时间的取舍。

为什么是 Immer？

immutable.js

• 自己维护了一套数据结构，Javascript 的数据类型和 immutable.js 的类型需要相互转换，对数据有侵入性。
• 库的体积比较大（63KB），不太适合包体积紧张的移动端。
• API 极其丰富，学习成本较高。
• 兼容性非常好，支持 IE 较老的版本。

immer

• 使用 Proxy 实现，兼容性差。
• 体积很小（12KB），移动端友好。
• API 简洁，使用 Javascript 自己的数据类型，几乎没有理解成本。

优缺点对比之下，immer 的兼容性缺点在我们的环境下完全可以忽略。使用一个不带来其他概念负担的库还是要轻松很多的。

Immer 概览

Immer 基于 copy-on-write 机制。

Immer 的基本思想是，所有更改都应用于临时的 draftState，它是 currentState 的代理。一旦完成所有变更，Immer 将基于草稿状态的变更生成 nextState。这意味着可以通过简单地修改数据而与数据进行交互，同时保留不可变数据的所有优点。

本节围绕 produce 这个核心 API 做介绍。Immer 还提供了一些辅助性 API，详见官方文档。

核心 API：produce

语法1：

produce(currentState, recipe: (draftState) => void | draftState, ?PatchListener): nextState

语法2：

produce(recipe: (draftState) => void | draftState, ?PatchListener)(currentState): nextState

使用 produce

import produce from "immer"

const baseState = [
    {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"})
    draftState[1].done = true
})
复制代码

上面的示例中，对 draftState 的修改都会反映到 nextState 上，并且不会修改 baseState。而 immer 使用的结构是共享的，nextState 在结构上与 currentState 共享未修改的部分。

// the new item is only added to the next state,
// base state is unmodified
expect(baseState.length).toBe(2)
expect(nextState.length).toBe(3)

// same for the changed 'done' prop
expect(baseState[1].done).toBe(false)
expect(nextState[1].done).toBe(true)

// unchanged data is structurally shared
expect(nextState[0]).toBe(baseState[0])
// changed data not (dûh)
expect(nextState[1]).not.toBe(baseState[1])
复制代码

柯理化 produce

给 produce 第一个参数传递函数时将会进行柯理化。它会返回一个函数，该函数接收的参数会被传递给 produce 柯理化时接收的函数。 示例：

// mapper will be of signature (state, index) => state
const mapper = produce((draft, index) => {
    draft.index = index
})

// example usage
console.dir([{}, {}, {}].map(mapper))
// [{index: 0}, {index: 1}, {index: 2}])
复制代码

可以很好的利用这种机制简化 reducer：

import produce from "immer"

const byId = produce((draft, action) => {
    switch (action.type) {
        case RECEIVE_PRODUCTS:
            action.products.forEach(product => {
                draft[product.id] = product
            })
            return
    }
})
复制代码

recipe 的返回值

通常，recipe 不需要显示的返回任何东西，draftState 会自动作为返回值反映到 nextState。你也可以返回任意数据作为 nextState，前提是 draftState 没有被修改。

const userReducer = produce((draft, action) => {
    switch (action.type) {
        case "renameUser":
            // OK: we modify the current state
            draft.users[action.payload.id].name = action.payload.name
            return draft // same as just 'return'
        case "loadUsers":
            // OK: we return an entirely new state
            return action.payload
        case "adduser-1":
            // NOT OK: This doesn't do change the draft nor return a new state!
            // It doesn't modify the draft (it just redeclares it)
            // In fact, this just doesn't do anything at all
            draft = {users: [...draft.users, action.payload]}
            return
        case "adduser-2":
            // NOT OK: modifying draft *and* returning a new state
            draft.userCount += 1
            return {users: [...draft.users, action.payload]}
        case "adduser-3":
            // OK: returning a new state. But, unnecessary complex and expensive
            return {
                userCount: draft.userCount + 1,
                users: [...draft.users, action.payload]
            }
        case "adduser-4":
            // OK: the immer way
            draft.userCount += 1
            draft.users.push(action.payload)
            return
    }
})
复制代码

很显然，这样的方式无法返回 undefined。

produce({}, draft => {
    // don't do anything
})
复制代码

produce({}, draft => {
    // Try to return undefined from the producer
    return undefined
})
复制代码

因为在 Javascript 中，不返回任何值和返回 undefined 是一样的，函数的返回值都是 undefined 。如果你希望 immer 知道你确实想要返回 undefined 怎么办？ 使用 immer 内置的变量 nothing：

import produce, {nothing} from "immer"

const state = {
    hello: "world"
}

produce(state, draft => {})
produce(state, draft => undefined)
// Both return the original state: { hello: "world"}

produce(state, draft => nothing)
// Produces a new state, 'undefined'
复制代码

Auto freezing（自动冻结）

Immer 会自动冻结使用 produce 修改过的状态树，这样可以防止在变更函数外部修改状态树。这个特性会带来性能影响，所以需要在生产环境中关闭。可以使用 setAutoFreeze(true / false) 打开或者关闭。在开发环境中建议打开，可以避免不可预测的状态树更改。

在 setState 中使用 immer

使用 immer 进行深层状态更新很简单：

/**
 * Classic React.setState with a deep merge
 */
onBirthDayClick1 = () => {
    this.setState(prevState => ({
        user: {
            ...prevState.user,
            age: prevState.user.age + 1
        }
    }))
}

/**
 * ...But, since setState accepts functions,
 * we can just create a curried producer and further simplify!
 */
onBirthDayClick2 = () => {
    this.setState(
        produce(draft => {
            draft.user.age += 1
        })
    )
}
复制代码

基于 produce 提供了柯理化的特性，直接将 produce 柯理化的返回值传递给 this.setState 即可。在 recipe 内部做你想要做的状态变更。符合直觉，不引入新概念。

以 hook 方式使用 immer

Immer 同时提供了一个 React hook 库 use-immer 用于以 hook 方式使用 immer。

useImmer

useImmer 和 useState 非常像。它接收一个初始状态，返回一个数组。数组第一个值为当前状态，第二个值为状态更新函数。状态更新函数和 produce 中的 recipe 一样运作。

import React from "react";
import { useImmer } from "use-immer";


function App() {
  const [person, updatePerson] = useImmer({
    name: "Michel",
    age: 33
  });

  function updateName(name) {
    updatePerson(draft => {
      draft.name = name;
    });
  }

  function becomeOlder() {
    updatePerson(draft => {
      draft.age++;
    });
  }

  return (
    <div className="App">
      <h1>
        Hello {person.name} ({person.age})
      </h1>
      <input
        onChange={e => {
          updateName(e.target.value);
        }}
        value={person.name}
      />
      <br />
      <button onClick={becomeOlder}>Older</button>
    </div>
  );
}
复制代码

很显然，对这个例子来讲，无法体现 immer 的作用：)。只是个展示用法的例子。

useImmerReducer

对 useReducer 的封装：

import React from "react";
import { useImmerReducer } from "use-immer";

const initialState = { count: 0 };

function reducer(draft, action) {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return void draft.count++;
    case "decrement":
      return void draft.count--;
  }
}

function Counter() {
  const [state, dispatch] = useImmerReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
}
复制代码

参考文章

• Immer
• use-immer
• React - Optimizing Performance
• Immutable Data with Immer and React setState
• Immutability in React and Redux: The Complete Guide
• Copy-on-write