反应重新渲染列表答案

【问题标题】：React rerendering list反应重新渲染列表
【发布时间】：2021-01-06 20:36:44
【问题描述】：

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

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>
    </>
  );
};

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以将 List 和 Form 组件包装在 React.memo 组件中。

这样他们只会在他们的道具改变他们的身份时重新渲染。

见：

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

【讨论】：

我将组件包裹在 useMemo 中，我的上级说我不知道如何使用 useMemo，而且肯定有其他问题
能否也显示Form和CustomList的代码？
我认为用 React.memo 包装这些组件没有任何问题。尝试使用此资源来了解有关 react.memo 的更多信息：github.com/kentcdodds/react-performance

【解决方案2】：

如果您使用的是 FC，您可以避免使用备忘录和钩子（如 useMemo 和 useCallback）进行不必要的重新渲染。或者，如果您在 CC 中，您可以创建组件纯组件以防止不必要的渲染。

通过使用 Reaact.memo 包装组件来制作您的功能组件备忘录，然后这将有助于检查和渲染组件是否在您的此子组件中有任何更改。尽管 useCallback 和 useMemo 等所有钩子也有助于优化。

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

谢谢

【讨论】：

我把它包裹在一个 useMemo 中，显然这不是它应该如何工作的
不仅useMemeo，useMemo只检查值，你还要检查是否有任何函数导致你的组件重新渲染。如果数据不总是改变，也像这样包装子组件。比如 export default React.mem(YOUR COMPONENT NAME)