Skip to main content

谈谈 useImmer

是什么​

useImmer 提供的 draft 是一种特殊类型的对象，称为 Proxy，它“记录”你用它做了什么。它的核心思想就是利用 Vue3 源码中大量运用的 Proxy 代理，几乎以最小的成本实现了 JS 的不可变数据结构。

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

怎么用​

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>
  );
}

参考文章​