React对象深度更新的痛点——Immer来拯救你！

前端

2023-10-25 00:18:38

React 对象深度更新的简易解决方案：Immer

在构建 React 应用程序时，我们经常需要更新嵌套对象。然而，使用传统的赋值操作可能会非常繁琐，并且容易出错。随着对象层级的加深，代码会变得混乱且难以维护。

Immer 的登场

Immer 是一个强大的 JavaScript 库，专门解决对象深度更新的痛点。它的核心思想是通过创建对象的代理，在更新时自动跟踪变化。这样，我们可以使用简单的赋值操作来更新对象，而不必担心层级结构。

Immer 的 React 妙用

在 React 中使用 Immer，可以大大简化对象状态更新的代码。Immer 的 produce 函数可用于创建对象的代理，并在代理对象上进行更新。更新完成后，Immer 会自动将代理对象的变化应用到原始对象上。

以下代码示例演示了如何使用 Immer 更新 React 对象状态：

import { useState, produce } from 'react';

const App = () => {
  const [user, setUser] = useState({
    name: 'John Doe',
    address: {
      street: '123 Main Street',
      city: 'Anytown',
      state: 'CA',
      zip: '12345',
    },
  });

  const handleUpdateUser = () => {
    setUser(
      produce(draft => {
        draft.name = 'Jane Doe';
        draft.address.city = 'Newtown';
      })
    );
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.address.city}</p>
      <button onClick={handleUpdateUser}>更新用户</button>
    </div>
  );
};

在上面的示例中，我们首先使用 useState hook 创建一个用户状态对象。然后，在 handleUpdateUser 函数中，我们使用 produce 函数创建一个对象的代理，并在代理对象上进行更新。当用户点击“更新用户”按钮时，setUser 函数会将代理对象的变化应用到原始用户状态对象上，从而实现对象状态的更新。

Immer 的优势

使用 Immer 更新 React 对象状态具有许多优势，包括：