避免过多的重渲染，循环重渲染答案

【问题标题】：avoid Too many re-renders, circular re-rendering避免过多的重渲染，循环重渲染
【发布时间】：2021-08-04 13:01:26
【问题描述】：

我有一个表，表的每一行 (DifferentialRow) 使用 react-query 的 useQuery 钩子查询自己的数据。我希望表格的行按给定字段值排序（在差分行中计算），并且只显示前 10 个。

<Table.Body>
    {filteredVariables!.map((variable, i) => {
      return variable.show ? (
        <DifferentialRow
          key={i}
          ....
          variable={variable.variable}
          setFilteredVariables={setFilteredVariables}
          
        />
      ) : null;
    })}
  </Table.Body>

因此，当 (DifferentialRow) 行检索到其数据并计算排序值时，我使用新行值更新父过滤变量对象，排序，然后使用 setFilteredVariables 设置前 10 个的 show = true差分行（如下所示）。

const diffQuery = useQuery(["differential", {startDate, variable}],fetchDifferentialData);
...
if (diffQuery.isSuccess && diffQuery.data) {
   setSortValue(calcSortValue(diffQuery.data.data));
} 
html rows here

...
function calcSortValue(resultData: any[]) {
    // once we've got a result, and we have calculated the diff we need
    // to set the filteredVariables object that keeps track of cumulative data to only show top x
    try {
      let sortValue = resultData[0].dataValue - resultData[numberOfDays - 1].dataValue;

      setFilteredVariables((prev: { variable: string; diff: number; show: boolean }[]) => {
        let newResults = [...prev, { diff: sortValue, variable, show: undefined }];
        newResults.sort((a, b) => {
          return Math.abs(b.diff || 0) - Math.abs(a.diff || 0);
        });

        let inTopTen = newResults
          .slice(0, 10)
          .map((co) => co.variable)
          .includes(variable);

        let finalResults: CompareObject[];
        if (inTopTen) {
          finalResults = newResults.map((nr) => {
            return nr.variable === variable? { ...nr, show: true }: nr;
          });
        } else {
          finalResults = newResults.map((nr) => {
            return nr.variable === variable? { ...nr, show: false }: nr;
          });
        }
        
        return finalResults;
      });
      return diff;
    } catch (error) {
      return 0;
    }
  }

这都是在创建循环重新渲染，我不知道如何绕过它。

【问题讨论】：

你在哪里打电话setFilteredVariables？我觉得这里缺少一些关键代码
更新@TkDodo
你不能在渲染函数中调用状态设置器，这违反了渲染函数必须是纯的反应规则。

标签： reactjs react-hooks rerender react-query

【解决方案1】：

好的，所以我的解决方案是完全删除 DistributionRow 组件并使用 useQueries 查询父（表）组件中的数据（每个查询代表一行）。然后我对 useQueries 的结果进行所有排序和切片。

const diffResults = useQueries(...)

return diffResults.some((dr) => dr.isSuccess) ?  .... <Table.Body>
    {diffResults
      .filter((dr) => dr.isSuccess)
      .map((dr: any) => {
        let dateSorted = dr.data.data.sort(function (a: any, b: any) {
          return new Date(b.runDate).getTime() - new Date(a.runDate).getTime();
        });
        let diff = Math.round(calcDiff(dateSorted) * 10) / 10;

        let fullResult = {
          results: dr.data,
          diff,
        };
        return fullResult;
      })
      .sort((a, b) => {
        return Math.abs(b.diff || 0) - Math.abs(a.diff || 0);
      })
      .slice(0, 10)
      .map(({ diff, results }, i) => {
        return (
          <Table.Row key={i} data-testid="table-row">
            <Table.Cell>{results.variable}</Table.Cell>
            {results.data.map((d: any, i: number) =>
              new Date(d.runDate) > endDate ? (
                <Table.Cell key={i}>
                  {isNaN(d?.dataValue) ? null : Math.round(d?.dataValue * 10) / 10}
                </Table.Cell>
              ) : null
            )}
            {compareColumn ? <Table.Cell>{diff}</Table.Cell> : null}
          </Table.Row>
        );
      })}
  </Table.Body>

【讨论】：