React切换网格视图时如何回退state到之前的状态

在React应用中实现网格形式的数据列排布，共包含两种视图：

• 默认视图
• isSelecting选择视图
  每列配有可拖拽手柄，支持用户自由调整列宽。用户点击进入选择模式时，列对象数组的最前端会新增一个复选框列。
  
  

当前列宽调整逻辑：用户拖拽调整列宽后，新宽度值会保存到state中对应列的索引位置，例如拖拽第一列的调整手柄，新宽度会写入索引为0的列配置中，代码如下：

overrideColumnWidth = (columnIndex, newWidth) => {
this.setState({
  columnWidthOverrides: {
    ...this.state.columnWidthOverrides,
    [columnIndex]: newWidth
  }
});
}

进入选择模式时的索引偏移逻辑：为了避免新增的复选框列继承之前调整的自定义列宽，会将原有列宽配置的索引整体+1，通过done状态标记避免逻辑重复执行。两种模式下的列宽配置示例：

• 默认视图：columnWidthOverrides = { 0: 400, 1: 500, 2: 600}
• 选择视图：columnWidthOverridesSelectMode = { 0: undefined, 1: 400, 2: 500, 3: 600}
  对应实现代码：

componentWillUpdate(nextProps) {
if (nextProps.isSelecting && !this.state.done) {
  const { columnWidthOverrides } = this.state;
  const columnIndexes = Object.keys(columnWidthOverrides);
  const incrementedIndexes = columnIndexes.map((index) => ({ 
    [`${Number(index) + 1}`]: columnWidthOverrides[Number(index)] 
  }));
  const incrementedColumns = incrementedIndexes.reduce((map, columnWidthOverrides) => ({ 
    ...map, ...columnWidthOverrides }),{});
  this.setState({
    done: !this.state.done,
    columnWidthOverrides: {
      ...incrementedColumns
    }
  });
}
}

选择视图下可以正确匹配对应列宽，但用户切回非选择模式时，列宽无法回退到进入选择模式前的状态（例如恢复为{0: 400, 1: 500, 2: 600}）。之前尝试在componentWillMount中重置状态，触发了无限循环，setState被自动多次调用导致应用崩溃。

核心思路是不要反复修改同一份列宽配置，将两种视图的列宽配置分开存储，模式切换时不需要篡改原始配置，从根源上避免回退和循环问题：

1. 拆分state存储，废弃原来的done标记：
   • 新增defaultColumnWidthOverrides：永久存储默认视图下的自定义列宽，任何模式切换都不修改该字段
   • 新增selectModeColumnWidthOverrides：存储选择模式下的列宽配置，复选框列的宽度配置单独存在该字段中
2. 替换不安全的componentWillUpdate生命周期，改用componentDidUpdate监听isSelecting的变化，仅在props值真正发生改变时执行一次逻辑，从根本上避免无限循环
3. 列宽更新、渲染时根据当前视图模式读取对应配置即可，切回默认视图时不需要做任何转换操作，直接读取默认配置天然就是回退状态

参考实现代码：

// 初始化state
state = {
  defaultColumnWidthOverrides: {}, // 仅存默认视图列宽，不做任何索引偏移
  selectModeColumnWidthOverrides: { 0: undefined } // 单独存选择模式配置，0索引为复选框列
}

// 列宽更新方法：根据当前模式写入对应配置项
overrideColumnWidth = (columnIndex, newWidth) => {
  const configKey = this.props.isSelecting ? 'selectModeColumnWidthOverrides' : 'defaultColumnWidthOverrides'
  this.setState({
    [configKey]: {
      ...this.state[configKey],
      [columnIndex]: newWidth
    }
  });
}

componentDidUpdate(prevProps) {
  // 必须加判断：只有isSelecting值发生变化时才执行逻辑，否则会触发无限循环
  if (prevProps.isSelecting !== this.props.isSelecting) {
    // 仅在进入选择模式时，基于默认配置生成偏移后的选择模式列宽
    if (this.props.isSelecting) {
      const { defaultColumnWidthOverrides, selectModeColumnWidthOverrides } = this.state;
      // 把默认配置的索引全部+1
      const shiftedWidths = Object.fromEntries(
        Object.entries(defaultColumnWidthOverrides).map(([idx, width]) => [Number(idx) + 1, width])
      )
      this.setState({
        selectModeColumnWidthOverrides: {
          0: selectModeColumnWidthOverrides[0], // 保留复选框列用户调整过的宽度
          ...shiftedWidths
        }
      })
    }
    // 切回默认视图时不需要修改任何state，渲染直接读defaultColumnWidthOverrides即可
  }
}

// 渲染列时取当前模式对应的配置
const currentColumnWidths = this.props.isSelecting 
  ? this.state.selectModeColumnWidthOverrides 
  : this.state.defaultColumnWidthOverrides

注意：任何在componentDidUpdate/componentWillUpdate中调用setState的场景，必须包裹前置判断逻辑，确保只有在关联状态确实需要更新时才执行setState，否则会触发「更新→setState→触发更新」的死循环。另外componentWillMount已在React 16+版本标记为不安全的生命周期，不建议继续使用。

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