Reactjs 避免过多的重新渲染、循环重新渲染

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

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

---

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

好的，所以我的解决方案是完全删除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>

常量衍射结果=使用查询（…） 返回衍射结果。一些（（dr）=>dr.issucess）。。。。 {衍射结果 .filter（（dr）=>dr.isSuccess） .map（（dr:any）=>{ 让dateSorted=dr.data.data.sort（函数（a:any，b:any）{ 返回新日期（b.runDate）.getTime（）-新日期（a.runDate）.getTime（）； }); 设diff=Math.round（calcDiff（dateSorted）*10）/10； 设fullResult={ 结果：dr， 差异， }; 返回完整结果； }) .排序（（a，b）=>{ 返回Math.abs（b.diff|0）-Math.abs（a.diff|0）； }) .切片（0,10） .map（{diff，results}，i）=>{ 返回( {results.variable} {results.data.map（（d:any，i:number）=> 新日期（d.runDate）>结束日期( {isNaN（d？.dataValue）？null:Math.round（d？.dataValue*10）/10} )：null )} {compareColumn？{diff}:null} ); })}

---

您在哪里调用

setFilteredVariables

？我觉得这里缺少了一些关键代码，updated@tkdodo你不能在呈现函数中调用状态设置器，这打破了呈现函数必须是纯的规则。这看起来不错

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>