如何将重复的React状态操作逻辑抽象为高阶函数？

你可以通过让高阶函数接收包含所有参数的回调来解决参数差异问题，核心思路是让生成的函数自动处理数组复制和状态更新，把具体的修改逻辑通过回调传入，同时传递所有调用时的参数。

高阶函数实现 #

const functionMaker = (modifyFn) => {
  return (...args) => {
    const newColors = [...colors];
    // 把复制后的数组和所有传入的参数传给修改回调
    modifyFn(newColors, ...args);
    setColors(newColors);
  };
};

重构后的三个操作函数 #

• 更新颜色：

const updateColor = functionMaker((newColors, index, color) => {
  newColors[index] = color;
});

• 删除颜色：

const deleteColor = functionMaker((newColors, index) => {
  newColors.splice(index, 1);
});

• 复制颜色：

const duplicateColor = functionMaker((newColors, index) => {
  newColors.splice(index, 0, newColors[index]);
});

关键说明 #

这里用剩余参数...args接收生成函数被调用时传入的所有参数，再把这些参数连同复制好的newColors一起传给修改回调。不管每个操作需要1个还是2个参数，都能被正确传递，完美复用了首尾的重复逻辑。

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