如何避免列表中不必要的重新渲染？ （功能组件）

Question

我有一个循环生成的列表。可以编辑此列表中的每个项目。编辑列表行后，列表会更改，但是已编辑的一个元素（而不是其余元素）会被更改，但是会渲染列表的所有行。 条件：该列表在功能组件中使用。每行都是一个返回JSX的组件。 这是我的代码：

import React, { useMemo, useCallback } from "react";
import RegionListItem from "~f/region-list-item";
import RegionListItemEdit from "~f/region-list-item-edit";
import useRegionData from "./use-region-data";

const RegionList = ({ list }) => {
  const { regions = [], changeRegion, resetRegion } = useRegionData(list);

  return (
    <ul className="list region-list">
      {regions.length &&
        regions.map(item => (
          <React.Fragment key={item._id}>
            {item.edit ? (
              <RegionListItemEdit
                item={item}
                onEdit={changeRegion}
                onReset={resetRegion}
              />
            ) : (
              <RegionListItem item={item} onEdit={changeRegion} />
            )}
          </React.Fragment>
        ))}
    </ul>
  );
};

export default RegionList;

试图使用useCallback，但一无所获。并且不确定useCallback是否可以在循环中使用：

import React, { useMemo, useCallback } from "react";
import RegionListItem from "~f/region-list-item";
import RegionListItemEdit from "~f/region-list-item-edit";
import useRegionData from "./use-region-data";

const RegionList = ({ list }) => {
  const { regions = [], changeRegion, resetRegion } = useRegionData(list);

  return (
    <ul className="list region-list">
      {regions.length &&
        regions.map(item => (
          <React.Fragment key={item._id}>
            {item.edit
              ? useCallback(
                  <RegionListItemEdit
                    item={item}
                    onEdit={changeRegion}
                    onReset={resetRegion}
                  />,
                  [item]
                )
              : useCallback(
                  <RegionListItem item={item} onEdit={changeRegion} />,
                  [item]
                )}
          </React.Fragment>
        ))}
    </ul>
  );
};

export default RegionList;