如何抽离React render中无关配置数据优化代码，对应官方文档章节在哪

优化方案 #

你提到的四个配置对象均为纯静态常量，不依赖组件的state、props，也没有动态计算逻辑，最优的抽离方式是直接放到组件定义外部，完全不需要参与组件的实例化和渲染流程，从根源避免每次render都重新创建对象的性能损耗，也能让render逻辑更清爽。如果后续这些配置有需要基于props动态调整的场景，再考虑抽成类的静态属性或者实例方法。

优化后代码示例（抽离到组件外部） #

// 组件外部定义静态配置，全局只初始化一次
const commitsContentValues = {    
  firstRowText: "Date",
  secondRowText: "Author",
  thirdRowtext: "Commit Message",
  firstRowKey: "committed_date",
  secondRowKey: "author_name",
  thirdRowkey: "title",
};
const membersContentValues = {       
  firstRowText: "Username",
  secondRowText: "Name",
  thirdRowtext: "GitLab Id",
  firstRowKey: "username",
  secondRowKey: "name",
  thirdRowkey: "id",
};
const commitsValue = {            
  dataKey: "commitsData",
  arrKey: "commits",
};
const memberValue = {            
  dataKey: "membersData",
  arrKey: "members",
};

export default class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: {}, // 原代码拼写为iteams，属于笔误可同步修正
    };
  }

  async componentDidMount() {
    try {
      const membersData = 123
      const commitsData = 'zxc'
      this.setState({
        items: { membersData, commitsData },
      });
    } catch (err) {
      console.log(err);
    }
  }
  render() {
    const { items } = this.state;
    return (
      <div>
        {this.props.idx === 0 && (
          <BasicTable
            commits={items.commitsData}
            commitsData={commitsContentValues}
            keys={commitsValue}
          ></BasicTable>
        )}
        {/* 其余渲染逻辑 */}
      </div>
    )
  }
}

可选方案：抽离为类静态属性 #

如果需要把配置收拢在组件内部维护，可以定义为类静态属性，所有组件实例共享配置，仅初始化一次：

export default class Content extends Component {
  // 类静态属性定义
  static commitsContentValues = {    
    firstRowText: "Date",
    secondRowText: "Author",
    thirdRowtext: "Commit Message",
    firstRowKey: "committed_date",
    secondRowKey: "author_name",
    thirdRowkey: "title",
  };
  static membersContentValues = {       
    firstRowText: "Username",
    secondRowText: "Name",
    thirdRowtext: "GitLab Id",
    firstRowKey: "username",
    secondRowKey: "name",
    thirdRowkey: "id",
  };
  static commitsValue = {            
    dataKey: "commitsData",
    arrKey: "commits",
  };
  static memberValue = {            
    dataKey: "membersData",
    arrKey: "members",
  };

  constructor(props) {
    super(props);
    this.state = {
      items: {},
    };
  }
  // 其余生命周期逻辑保持不变
  render() {
    const { items } = this.state;
    // 通过类名访问静态属性即可
    return (
      <div>
        {this.props.idx === 0 && (
          <BasicTable
            commits={items.commitsData}
            commitsData={Content.commitsContentValues}
            keys={Content.commitsValue}
          ></BasicTable>
        )}
      </div>
    )
  }
}

官方文档对应说明 #

该优化规则在React官方文档的两个部分有相关介绍：

1. 类组件render方法的最佳实践：明确要求render方法应该为纯函数，仅根据state和props返回需要渲染的内容，不要在render中执行不必要的变量声明、对象创建操作，避免每次渲染重复生成相同对象，既影响性能也会让渲染逻辑冗余。
2. 性能优化章节：提到避免在render中生成新的对象/函数作为props传递给子组件，否则会触发子组件不必要的重渲染，和你当前场景的优化目标完全匹配。

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