use-immer项目技术文档

use-immer项目技术文档

use-immer Use immer to drive state with a React hooks 项目地址: https://gitcode.com/gh_mirrors/us/use-immer

use-immer 是一个React Hook，它结合了immer的强大功能来简化状态管理，使您能够利用immer的不可变数据处理能力在React应用中优雅地操作复杂状态。

安装指南

要开始使用use-immer，您需要先确保您的项目环境中已配置好Node.js和npm。然后，在项目根目录下运行以下命令以安装所需的依赖：

npm install immer use-immer

这将安装immer库以及use-immer组件，后者提供了与immer集成的React Hook。

项目的使用说明

基础使用：useImmer

useImmer 函数类似于React的useState，但允许您通过immer的生产者函数来无痛地修改复杂的状态结构。

示例代码：

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; // 允许直接修改draft，immer会生成新的不可变状态。
    });
  }

  function becomeOlder() {
    updatePerson(draft => {
      draft.age++; // 无需担心原生数组或对象的浅复制问题。
    });
  }

  return /* 省略渲染逻辑 */;
}

简单状态管理：直接传递值给updater

对于不涉及深层对象或数组变化的情况，您可以直接传递新值给updatePerson，这样useImmer的行为就类似useState，不过建议复杂的变更还是使用immer的特性。

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

function BirthdayCelebrator(){
  const [age, setAge] = useImmer(20); // 直接使用setAge更新

  function birthDay(event){
    setAge(age + 1); // 更新年龄，简单直接。
  }

  return /* 省略渲染逻辑 */;
}

项目API使用文档

useImmer(initialState)

• initialState: 初始状态值，可以是任何JavaScript值。
• 返回一个包含两个元素的数组，第一个元素是当前状态，第二个元素是更新函数updateFunction，该函数接受一个immer生产者函数或者直接的新状态值作为参数。

useImmerReducer(reducer, initialState)

• reducer: 类似于Redux中的reducer，接收draft和action，并通过immer处理状态变更。
• initialState: 初始状态。
• 返回一对值：当前状态和dispatch函数，可以直接调用指定的action类型进行状态变更。

实践示例：useImmerReducer

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

// 定义reducer
const reducer = (draft, action) => {
  switch (action.type) {
    case "reset":
      return initialState; // 重置到初始状态
    case "increment":
      draft.count++; // 使用immer简化递增操作
      break;
    case "decrement":
      draft.count--; // 同上，简化减法
      break;
    default:
      break;
  }
};

function Counter() {
  const [state, dispatch] = useImmerReducer(reducer, { count: 0 }); // 初始化计数器状态
  return (
    <> {/* 渲染部分省略 */}
  );
}

---

本文档介绍了如何安装和使用use-immer，无论是通过简单的状态更新，还是更复杂的基于immer的reducer模式，都能帮助开发者高效地管理和更新React应用的状态。通过理解这些概念，您可以灵活运用immer的威力，提高应用程序的可维护性和性能。

use-immer Use immer to drive state with a React hooks 项目地址: https://gitcode.com/gh_mirrors/us/use-immer