React重新渲染列表

Question

我有一个react页面，上面有几个组件，其中一个状态显示了一个模式。我不希望应用程序中的所有组件在模式显示时重新渲染。

const CustomersPage = () => {
  const [showModal, setShowModal] = useState(false);
  const dataSource = [...omitted data]

  return (
    <>
      <Modal
        visible={showModal} />

      <div>
        <div>
          <div>
            <Button type="primary" onClick={() => setShowModal(true)}>
              Create 
            </Button>
          </div>

          <CustomForm />
        </div>

        <CustomList dataSource={dataSource} />
      </div>
    </>
  );
};

当showModal值改变时，组件CustomForm组件和CustomList组件将重新呈现，但我不希望它们在每次显示模式时都重新呈现，因为列表可以包含超过100个组件。我该怎么做呢？

编辑。

const CustomList = ({ dataSource }) => {
  return (
    <div>
      {dataSource?.map(i => (
        <CustomCard
          id={i.id}
          ...other props
        />
      ))}
    </div>
  );
};

const CustomCard = ({
  ... props
}) => {

  return (
    <>
      <Card
       ...omitted properties
      </Card>
    </>
  );
};

Answer 1

您可以将列表和表单组件包装在React.memo组件中。

这样，只有当他们的道具改变他们的身份时，他们才会重新渲染。

请参见：

https://scotch.io/tutorials/react-166-reactmemo-for-functional-components-rendering-control

Answer 2

如果您使用FC，则可以避免使用诸如useMemo和useCallback之类的备忘录和钩子进行不必要的重新渲染。或者，如果你在CC中，你可以创建你的组件，避免不必要的渲染。

通过用Reaact.memo包装组件来使您的函数组件备注，这样将有助于检查和呈现组件是否在此子组件中有任何更改。尽管有像、useCallback、和这样的钩子，但对优化也很有帮助。

有很多文章都是关于这些钩子的用例的，去看看吧。他们真的很有用。

谢谢