阅读 2885

2020要用immer来代替immutable优化你的React项目

不可变数据

React的老手们早就知道为什么要用不可变数据了,但是为了防止新手们看不懂,所以还是要解释一下什么是不可变数据,不可变数据指的其实就是当你修改一个数据的时候,这个数据会给你返回一个新的引用,而自己的引用保持不变,有点像是经常用到的数组的map方法:

const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 10);

console.log(arr1 === arr2)
//false
复制代码

这样的话每次修改数据,新返回的数据就和原来不相等了。

如果数据变更,节点类型不相同的时候会怎样呢?React 的做法非常简单粗暴,直接将 原 VDOM 树上该节点以及该节点下所有的后代节点 全部删除,然后替换为新 VDOM 树上同一位置的节点,当然这个节点的后代节点也全都跟着过来了。

这样的话非常浪费性能,父组件数据一变化,子组件全部都移除,再换新的,所以才有了shouldComponentUpdate这个生命周期(Vue的小伙伴请放心,Vue原理和React不太一样,所以没这毛病),这个函数如果返回false的话子组件就不会更新,但是每次在这个函数里面写对比会很麻烦,所以有了PureComponent和Memo,但是只提供了浅比较,所以这时候不可变数据就派上用场了,每次修改数据都和原数据不相等的话,就可以精确的控制更新。

immutable

Facebook早就知道React这一缺陷,所以历时三年打造了一个不可变数据的immutable.js。它内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也设计的和JS对象、数组等类似。
不过功能虽全,但是如果我们仅仅只是为了优化浅对比防止子组件过度刷新的话,引入这么大的一个库就未免有些大材小用了,而且学习成本也是需要考虑在内的,所以要为大家介绍一下今天的主角:轻量、易用、简洁又可以快速上手的immer.js

immer

immer这玩意来头可不小,他的创造者就是大名鼎鼎的Mobx作者,听过Mobx的人应该都知道,它与Redux相比更简洁、更轻量、同时也更加易学,所以immer也同样的继承了这些优点:轻量、简洁、易上手、并且使用起来也非常的舒服,不会产生容易把immutable数据类型与原生JS数据类型搞混的情况。它的核心思想就是利用Vue3源码中大量运用的Proxy代理,几乎以最小的成本实现了JS的不可变数据结构,解决了许多日常开发中的棘手问题,相信看完我的文章你一定会喜欢上它的!
首先第一步就是先进行安装:

npm i -S immer
复制代码

或者

yarn add immer
复制代码
import produce from 'immer';

const array = [{value: 0}, {value: 1}, {value: 2}];
const arr = produce(array, draft => {
  draft[0].value = 10;
});

console.log(arr === array);
//false
复制代码

解释一下:produce是生产的意思(你想起啥名都行,但是官网喜欢这么叫,我就跟着这么起名),这个函数第一个参数是你想要改变的数据对象,第二个参数是一个函数,这个函数的参数draft是草稿的意思,代表的就是你想要改变的那个数据对象,然后在函数体内你就正常想怎么改就怎么改,produce运行完的结果就是一个全新的对象啦!怎么样是不是超级简洁超级好用呢?

  • 注意:如果你什么也不返回或者并没有操作数据的话,并不会返回一个新的对象!
const array = [{value: 0}, {value: 1}, {value: 2}];
const arr = produce(array, draft => {});

console.log(array === arr);
// true
复制代码

引用一张immutable的图,从图中可以看出来返回值并不是一份深拷贝内容,而是共享了未被修改的数据,这样的好处就是避免了深拷贝带来的极大的性能开销问题,并且更新后返回了一个全新的引用,即使是浅比对也能感知到数据的改变。

  • 如果把produce的第一个参数省略掉的话,只传入第二个参数返回值将会是一个函数👇
const array = [{value: 0}, {value: 1}, {value: 2}];
const producer = produce(draft => {
  draft[0].value = 10;
});
const arr = producer(array);

console.log(array === arr);
// false
复制代码

这样虽然结果一样,但是却增强了可复用性,甚至可以进行再次封装来形成一个高阶函数:

const array = [{value: 0}, {value: 1}, {value: 2}];
const producer = (state, fn) => produce(fn)(state);
const arr = producer(array, draft => { draft[0] = 666 });

console.log(array, arr);
// [{…}, {…}, {…}]
// [666, {…}, {…}]
复制代码
  • 此时我们并没有任何返回值,那么如果有返回值的话会怎样呢?
const array = [{value: 0}, {value: 1}, {value: 2}];
const producer = (state, fn) => produce(fn)(state);
const arr = producer(array, draft => [666, ...draft]);

console.log(array, arr);
// [{…}, {…}, {…}]
// [666, {…}, {…}, {…}]
复制代码

我们发现返回值就是新数据的结果!所以我们可以清楚的得知:在没有返回值时数据是根据函数体内对draft参数的操作生成的。有返回值的话返回值就会被当做新数据来返回。

使用use-immer来替代你的useState

由于React Hooks的异军突起,导致现在很多组件都使用函数来进行编写,数据就直接写在useState中,但是有了useImmer,你以后就可以用它来代替useState啦!
还是老规矩,先安装:

npm install immer use-immer
复制代码

yarn add immer use-immer
复制代码

用法

定义数据: const [xxx, setXxx] = useImmer(…)
修改数据: setXxx(draft => {})

可以看到用法和setState几乎没啥太大区别,接下来我们通过一个小案例来继续深入useImmer的用法:

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


export default function () {
  const [person, setPerson] = useImmer({
    name: "马云",
    salary: '对钱没兴趣'
  });

  function setName(name) {
    setPerson(draft => {
      draft.name = name;
    });
  }

  function becomeRicher() {
    setPerson(draft => {
      draft.salary += '$¥';
    });
  }

  return (
    <div className="App">
      <h1>
        {person.name} ({person.salary})
      </h1>
      <input
        onChange={e => {
          setName(e.target.value);
        }}
        value={person.name}
      />
      <br />
      <button onClick={becomeRicher}>变富</button>
    </div>
  );
}
复制代码

这是一个改编自官网的小例子,可以看得出useImmer的用法和useState十分相似,在保持住了简洁性的同时还具备了immutable的数据结构,十分便捷。

useImmerReducer

use-immer对useReducer进行了加强封装,同样也几乎没什么学习成本,再改编一下官网小案例👇

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

const initialState = { salary: 0 };

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

export default function () {
  const [state, dispatch] = useImmerReducer(reducer, initialState);
  return (
    <>
      期待工资: {state.salary}K
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "reset" })}>重置</button>
    </>
  );
}
复制代码

怎么样?看完之后是不是感觉神清气爽,有这么一个东西轻量、简洁、易用又好学,看一篇文章的功夫就能学会,而且还能很好的解决你的React性能问题,那还等什么?赶紧npm install下载安装吧!

往期精彩文章