React中追踪state变更发送仅含修改字段的Patch请求方案咨询

核心逻辑很简单：守住原始值基准、精准追踪修改路径、按需拼接提交体，别上来就搞全量深对比，大表单下卡得要死还容易出边界bug。

具体落地步骤 #

• 初始化阶段固定原始值基准
  接口返回初始表单数据后，立刻做一份深拷贝存为不可变常量，比如用structuredClone(originalData)存成组件级的只读常量，后续所有表单操作都不能修改这份值，这是所有变更对比的唯一基准。别把原始值存在跟着表单更新的state里，改到基准值之后对比全错。
• 优先用表单库自带的脏值追踪能力，别从零手写
  自己维护嵌套对象、数组的修改状态很容易漏场景：
  • 用React Hook Form的话，直接取内置的dirtyFields返回值就行，它会自动记录所有被用户修改过的字段路径，嵌套对象、数组下标都能精准匹配，本身是字段级更新，性能比自己写递归对比好很多。
  • 用Formik的话，结合dirty状态和字段meta信息，也能拿到所有修改过的字段，注意开enableReinitialize的时候要同步更新原始值快照，不然会把接口拉回来的新值误判为用户修改。
  • 要是完全手写状态管理，就单独维护一个Set结构存修改字段的路径字符串：比如用户改了收货地址的街道字段，就把address.street塞进Set；改了商品列表第3项的价格，就把items.2.price塞进去。别等点保存的时候再全量递归对比两个大对象，输入的时候同步记路径几乎没有性能开销。
• 按修改路径拼接Patch请求体
  拿到所有修改过的字段路径后，不用做全量对象diff，直接沿着路径从当前表单值里取对应的值，拼出嵌套结构的提交对象就行，简单实现可以参考下面的工具函数：

  // 根据路径集合生成嵌套Patch对象
  function generatePatch(dirtyPaths, currentFormValues) {
    const patch = {};
    for (const path of dirtyPaths) {
      const keys = path.split('.');
      let cursor = patch;
      keys.forEach((key, idx) => {
        const isArrayPos = !Number.isNaN(Number(key));
        if (idx === keys.length - 1) {
          cursor[key] = getNestedValue(currentFormValues, path);
          return;
        }
        cursor[key] = cursor[key] || (isArrayPos ? [] : {});
        cursor = cursor[key];
      });
    }
    return patch;
  }
  
  // 按路径读取对象值
  function getNestedValue(source, path) {
    return path.split('.').reduce((acc, key) => acc?.[key], source);
  }
  

  数组场景别死抠单条item的diff：如果涉及数组排序、删除、插入操作，要么直接把整个数组标记为已修改，提交全量最新数组；要么后端支持RFC6902规范的JSON Patch的话，就记录每一步数组操作（add/remove/replace）提交，后者更省流量但前后端联调成本高，看业务需求选就行，没必要为了少传几个字段写一堆容易出bug的数组diff逻辑。
• 特殊场景兜底
  • 日期、文件这类引用类型的值，初始化的时候就转成可对比的基础类型（比如时间戳、文件唯一标识）存到原始值快照里，别直接拿对象引用做对比，不然会把没修改过的值误判为脏字段。
  • 触发表单重置的时候，记得把存脏路径的Set清空，表单值回滚到原始快照，避免残留之前的修改记录。
  • 动态增减的表单项，新增的项直接把对应路径标记为脏，删除项如果后端要求传删除标识，记得在patch里补上对应字段。

常见坑点 #

• 不要每次输入都跑深对比判断字段是否修改，表单字段超过30个的时候会有明显的输入延迟，字段级脏路径追踪的性能要高一个量级。
• 所有表单更新必须遵循不可变数据规范，绝对不能直接修改state里的对象/数组属性，不然不仅React不触发重渲染，修改记录也会乱。
• 空值、默认值要提前和后端对齐：比如下拉框默认选0、输入框默认空字符串，初始化的时候就要把这些值灌到原始值快照里，不然会把默认值误判为用户修改。

内容的提问来源于stack exchange，提问作者Ezequiel Scigolini