React分组可调整列宽表格：动态设置width属性优化方案咨询

嘿，我看了你这段调整React表格列宽的Reducer代码，确实有不少可以优化的地方，既能让代码更简洁健壮，还能符合Redux的最佳实践。

原代码里的几个小问题 #

• 直接修改原state：const newColmuns = state.columns只是拿了原数组的引用，后续修改newColmuns里的内容会直接改动原state，这违反了Redux的不可变状态原则，很可能导致组件不触发重新渲染。
• 遍历方式不够直观：columns本身是数组，用Object.keys遍历有点绕，直接用数组的map等方法会更清晰。
• 查找逻辑有bug：findIndex返回0的时候（也就是子列的第一个元素），原代码里的Datakey > 0会把这个情况漏掉，应该判断Datakey !== -1才对。

优化后的实现方案 #

第一步：封装可复用的列宽更新函数 #

先把查找并更新列宽的逻辑抽成独立函数，这样Reducer里的代码会更干净，以后要扩展也方便：

// 递归查找指定dataIndex的列，并更新它的width
const updateColumnWidth = (columns, targetDataIndex, newWidth) => {
  return columns.map(column => {
    // 如果当前列就是目标列，返回更新width后的新对象
    if (column.dataIndex === targetDataIndex) {
      return { ...column, width: newWidth };
    }
    // 如果当前列有子列，递归处理子列数组
    if (column.children) {
      return {
        ...column,
        children: updateColumnWidth(column.children, targetDataIndex, newWidth)
      };
    }
    // 既不是目标列也没有子列，直接返回原对象
    return column;
  });
};

第二步：优化Reducer中的处理逻辑 #

在Reducer里调用这个封装好的函数，严格按照不可变的方式更新状态：

case 'SET_COLUMN_WIDTH':
  // 生成更新后的列配置数组
  const updatedColumns = updateColumnWidth(
    state.columns,
    action.payload.dataIndex,
    action.payload.size.width
  );
  // 返回新的state对象
  return { ...state, columns: updatedColumns };

为啥这么改更好？ #

• 严格遵循不可变原则：用map和对象展开运算符...创建新的数组和对象，完全不碰原state，确保Redux能准确检测到状态变化，触发组件更新。
• 支持任意层级的嵌套列：不管你的列有多少层children嵌套，递归函数都能找到目标列，比原代码只处理一层子列的逻辑更健壮。
• 逻辑更清晰：把复杂的查找更新逻辑抽成单独函数，Reducer里只需要调用函数，一眼就能看懂在做什么。
• 修复了原代码的bug：不会漏掉第一个子列的宽度更新。

额外的小提示 #

• 可以把action类型定义成常量，比如const SET_COLUMN_WIDTH = 'SET_COLUMN_WIDTH'，避免拼写错误。
• 如果你的表格列配置以后可能更复杂，这个递归方案也能轻松适配。

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