在React的AG Grid回调中设置状态变量为何会重置列顺序？

拖动AG Grid的列调整显示顺序后，触发一个会更新React状态的事件（比如排序时切换状态变量），列顺序会被重置回初始状态，但排序等其他列状态却能保留。

复现现象 #

• 拖动列打乱顺序后，点击列头排序（触发状态变量切换），列直接恢复初始顺序；
• 注释掉状态更新代码后，拖动列再排序，列顺序能保持不变。

项目环境与创建步骤 #

npx create-react-app aggrid-test-app
cd aggrid-test-app
npm install --save ag-grid-community
npm install --save ag-grid-react
npm start 

最简复现代码 #

import React, { useState, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const App = () => {
  const gridRef = useRef();
  const [stateVariable, setStateVariable] = useState(true)

  const defaultColDef = {
    sortable: true
  };

  const rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ];

  const columnDefs = [
    { field: "make" },
    { field: "model" },
    { field: "price" }
  ];

  const onSortChanged = (event) => {
    setStateVariable(!stateVariable)
  }

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
          ref={gridRef} 
          rowData={rowData} 
          columnDefs={columnDefs} 
          defaultColDef={defaultColDef} 
          onSortChanged={onSortChanged}
          />
    </div>
  );
};

export default App;

问题原因 #

状态更新会触发React组件重渲染，此时columnDefs是每次渲染都重新创建的新数组。AG Grid检测到列定义变化后，会重新初始化列配置，导致之前拖动调整的列顺序被重置。而排序状态是AG Grid内部维护的，不受列定义重新初始化的影响，所以能保留。

解决办法 #

方法1：用useMemo缓存列定义

通过useMemo将columnDefs缓存起来，确保组件重渲染时不会重新创建新的数组：

const columnDefs = useMemo(() => [
  { field: "make" },
  { field: "model" },
  { field: "price" }
], []);

方法2：将列定义移到组件外部

把columnDefs定义在组件函数之外，这样它不会随组件渲染重新创建：

const columnDefs = [
  { field: "make" },
  { field: "model" },
  { field: "price" }
];

const App = () => {
  // 组件内部代码不变
};

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