React父组件状态更新时避免非关联子图表重渲染方案咨询

问题根源 #

1. Main组件的state（如日期筛选）更新时，会触发所有子组件（包括无关的重型图表）重渲染
2. requestParams方法每次调用都会生成全新的参数对象，且包含随时间变化的paramsCreatedTimestamp，导致即使地点筛选未变化，传递给图表的apiParams也会被判定为新props，触发重渲染
3. 图表接收了大量无关props（如日期字符串、对比参数等），这些props的变化也会触发不必要的重渲染

具体解决方案 #

1. 为重型图表生成独立的地点专属参数

原requestParams包含所有筛选条件，我们需要为仅依赖地点的图表单独生成精简参数，移除日期、调研等无关逻辑，并优化时间戳生成规则（仅在地点筛选变化时更新）：

class Main extends React.Component {
  // 新增：仅生成地点相关的API参数
  locationOnlyRequestParams() {
    const { selectedStoreFilters, selectedTerritoryFilters, selectedCountryFilters } = this.state;
    const { props: { areas }, i18n } = this.props;

    const params = {};

    // 门店筛选
    if (selectedStoreFilters != null && Array.isArray(selectedStoreFilters) && ArrayHelper.hasOtherThanNull(selectedStoreFilters)) {
      params.store_ids = selectedStoreFilters[0] === -1 
        ? areas.stores.map(s => s.id) 
        : selectedStoreFilters;
    }

    // 区域筛选
    if (selectedTerritoryFilters != null && Array.isArray(selectedTerritoryFilters) && ArrayHelper.hasOtherThanNull(selectedTerritoryFilters)) {
      params.territory_ids = selectedTerritoryFilters[0] === -1 
        ? areas.territories.map(t => t.id) 
        : selectedTerritoryFilters;
    }

    // 国家筛选
    if (selectedCountryFilters != null && Array.isArray(selectedCountryFilters) && ArrayHelper.hasOtherThanNull(selectedCountryFilters)) {
      params.country_ids = selectedCountryFilters[0] === -1 
        ? areas.countries.map(c => c.id) 
        : selectedCountryFilters;
    }

    params.locale = i18n.language;

    // 仅在地点筛选变化时更新时间戳，避免无意义的参数对象变化
    const locationFiltersHash = JSON.stringify([selectedStoreFilters, selectedTerritoryFilters, selectedCountryFilters]);
    if (this._lastLocationHash !== locationFiltersHash) {
      this._lastLocationHash = locationFiltersHash;
      params.paramsCreatedTimestamp = Date.now();
      this._lastLocationTimestamp = params.paramsCreatedTimestamp;
    } else {
      params.paramsCreatedTimestamp = this._lastLocationTimestamp || Date.now();
    }

    return params;
  }

  render() {
    // 仅传递图表真正需要的props，去掉日期、对比参数等无关内容
    const heavyChartProps = {
      colorScales: this.props.props.colorScales,
      apiParams: this.locationOnlyRequestParams(),
      storeFilters: this.state.selectedStoreFilters,
      territoryFilters: this.state.selectedTerritoryFilters,
      countryFilters: this.state.selectedCountryFilters,
    };

    return (
      <>
        {/* 其他子组件 */}
        <HeavyLocationChart {...heavyChartProps} />
      </>
    );
  }
}

2. 为重型图表添加精准重渲染控制

如果图表是类组件，实现shouldComponentUpdate方法，仅在地点相关props变化时允许重渲染：

class HeavyLocationChart extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 对比所有地点相关props，只有变化时才返回true
    return JSON.stringify(nextProps.storeFilters) !== JSON.stringify(this.props.storeFilters) ||
           JSON.stringify(nextProps.territoryFilters) !== JSON.stringify(this.props.territoryFilters) ||
           JSON.stringify(nextProps.countryFilters) !== JSON.stringify(this.props.countryFilters) ||
           JSON.stringify(nextProps.apiParams) !== JSON.stringify(this.props.apiParams);
  }

  // 组件其他逻辑...
}

如果是函数组件，使用React.memo配合自定义对比函数：

const HeavyLocationChart = React.memo((props) => {
  // 组件内容
}, (prevProps, nextProps) => {
  // 返回true表示props未变化，无需重渲染
  return JSON.stringify(prevProps.storeFilters) === JSON.stringify(nextProps.storeFilters) &&
         JSON.stringify(prevProps.territoryFilters) === JSON.stringify(nextProps.territoryFilters) &&
         JSON.stringify(prevProps.countryFilters) === JSON.stringify(nextProps.countryFilters) &&
         JSON.stringify(prevProps.apiParams) === JSON.stringify(nextProps.apiParams);
});

3. 额外优化：缓存参数对象

可以在Main组件中缓存地点参数对象，只有当地点筛选变化时才重新生成，确保props引用稳定：

class Main extends React.Component {
  constructor(props) {
    super(props);
    this._cachedLocationParams = null;
    this._lastLocationFilters = null;
  }

  locationOnlyRequestParams() {
    const currentLocationFilters = JSON.stringify([
      this.state.selectedStoreFilters,
      this.state.selectedTerritoryFilters,
      this.state.selectedCountryFilters
    ]);

    // 如果地点筛选未变化，直接返回缓存的参数
    if (currentLocationFilters === this._lastLocationFilters && this._cachedLocationParams) {
      return this._cachedLocationParams;
    }

    // 否则生成新参数并缓存
    const params = {/* 生成逻辑同方案1 */};
    this._cachedLocationParams = params;
    this._lastLocationFilters = currentLocationFilters;
    return params;
  }
}

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