React中的某些固定的对象或者变量写在哪里比较好？

Question

我在纠结，像Table组件的columns prop应该定义在哪里好？模块中、class内部this指向、class直接指向，还是在class内部定义一个方法返回它？

如果columns最后有个操作(action)字段，就是说表格有操作，那么action column势必要定义render，而这些操作又会用到Foo组件内部的state或者props，这个时候又定义在哪里好呢？

import { Table } from 'antd'
// 1
class Foo extend React.Component {
  // 2

  getColumns = () = {
    // 3
  }

  render() {
    <Table 
      rowKey="key"
      columns={...}
    /> 
  }
}

再者，操作按钮多个的话，操作的数据又可以定义成一个对象，然后在action column的render中渲染。这个时候actions数组又定义在哪儿比较好呢？

const actions = [
  {
    key: 'detail'
    title: '详情'
  },
  {
    key: 'mod',
    title: '编辑'
  }
]

// action column
{
  dataIndex: 'action'
  title: 'action'
  render: () => {
    return ...
  }
}

了解到，对象(变量)如果定义在模块中，对象不会被销毁，如果定义在class中或者class的方法中，按理说class和方法也是对象，其占有内存，那岂不是它们对象(变量)也同时占着内存??

不知道我有没有想岔了，所以请教各路大神，望解惑，先谢过了

Answer 1

每个人的做法是不同的，我一般是新建一个constants.ts文件来存放
处理 Columns 里面的 render 时

// constants.ts
const COLUMNS = [
    { data: 'aa', title: '数据一' },
    { data: 'bb', title: '数据二' },
    { data: '_actions', title: '操作' },
];

// 使用 COLUMNS 的文件中
const effectColumns = (columns) => {
    return columns.map(col => {
        if (col.data === '_actions') {
            col.render = (val, record, idx) => <Button>{val}</Button>;
        }
        return col;
    });
}

return <>
    <Table columns={effectColumns(COLUMNS)} />
</>

当作参考

Answer 2

楼上的方案就可以了，完全没问题的，问题出在你的例子上。
在我看来，columnsProps并不属于“固定的对象或变量”。例如，在消息接收人选取组件和用户分组管理组件中可能都用到了基于用户的table，由于其目的不同，所以必然就应该是不同的columns配置，哪怕在原型设计中其外观是相同的，因为后续的迭代中两者必然演化方向是不同的。
columns这个特例其实根源在于字段名一致性问题，比如A组件写的是用户名，B组件里写成了用户姓名，表单字段也有这个情况。所以我在项目中一定会要求配置多语言的，不为语言切换，就为了解决这种命名不一致问题。
简单来说，全局定义一定是和业务无关的，业务相关的一定在业务内定义，这样才能保证业务变化后工作范围可控。
当然，你的项目如果是一次性开发的就无所谓了。

Answer 3

一般我们是采用第三种方式，通过一个方法返回来获取，通常这个方法里面还会进行一些业务数据的混入，这种方式的好处是不用预先定义 columns，当然也就不存在内存占用，只有当进行 render ，调用该方法获取 columns 时这份内存开销才会产生，并且完成渲染后 columns 会被释放回收。但通常 antd 的一些组件内部都会将 props 作为 useEffect 的依赖项来观测变化来实现内部状态的同步，也就是说 columns 传入 Table 组件后，可能会被组件内部的闭包缓存一份，这个内存占用是没办法规避的。个人认为编程就是执行效率和内存之间的权衡，通常更高的执行效率都以换取内存开销为代价的。