你这种把静态常量ABC提取到React组件外部的实现方式完全符合React的最佳实践，甚至是非常推荐的做法！

为什么这是规范的写法？ #

• 首先，ABC是纯静态的、不依赖组件状态/Props的常量，放在组件外部可以避免组件每次渲染或实例化时重复创建这个对象，提升性能（虽然这个提升很小，但养成习惯很重要）。
• 其次，这种写法让组件代码更简洁，把和组件逻辑无关的常量抽离出去，代码职责更清晰。
• 从你的代码来看，它在getInitialProps和render方法中都被用到，抽离到外部后，两处的引用也更统一，避免了重复定义的冗余。

有没有更优的解决方案？ #

这取决于ABC的使用范围：

• 如果这个常量是项目全局通用的：可以把它单独抽成一个独立的常量文件，比如src/constants/userMap.js，然后在需要的组件中导入使用。这样做的好处是全局复用，后续修改也只需要改一处，维护性更强：

  // src/constants/userMap.js
  export const USER_MAP = { jane: 0, john: 1 };
  
  // ProjectPage.js
  import { USER_MAP } from '../constants/userMap';
  
  class ProjectPage extends React.Component {
    constructor(props) {
      super(props);
      resetIdCounter();
    }
    static async getInitialProps({ query }) {
      return { query, variable: USER_MAP[query.name] };
    }
    render() {
      // 使用USER_MAP的代码
    }
  }
  

• 如果这个常量只是当前组件专属的：那你现在的写法就已经很优了，不需要额外抽离文件，保持代码的内聚性即可。

额外注意点 #

如果后续ABC需要变成动态生成的（比如依赖环境变量、异步接口返回值等），那就要调整写法：

• 若是类组件，可以把它放到组件的state或者在componentDidMount中初始化；
• 若是函数组件，可以用useMemo来缓存动态生成的对象，避免重复计算。不过从你当前的代码来看，它是纯静态常量，所以完全不需要担心这个问题。

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