仅在数据源更改时才反应渲染列表答案

【问题标题】：React render list only when data source changes仅在数据源更改时才反应渲染列表
【发布时间】：2021-01-06 22:45:02
【问题描述】：

基本上，我在父组件中有一个带有状态的模式，并且我有一个呈现列表的组件。当我打开模式时，我不希望每次都重新渲染列表，因为列表中可能有数百个项目太贵了。我只希望在 dataSource 属性更改时呈现列表。

如果可能，我还想尽量避免使用 useMemo。我想也许将模态移动到不同的容器，我不确定。如果有人可以请帮助，将不胜感激。这是沙盒的链接：https://codesandbox.io/s/rerender-reactmemo-rz6ss?file=/src/App.js

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

既然您说要避免使用 React.memo，我认为最好的方法是将 <Modal /> 组件移动到另一个“模块”

export default function App() {
  return (
    <>
      <Another list={list} />
      <List dataSource={list} />
    </>
  );
}

在<Another /> 组件中，您将拥有<Modal />：

import React, { useState } from "react";
import { Modal } from "antd";

const Another = ({ list }) => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <Modal
        visible={showModal}
        onCancel={() => setShowModal(false)}
        onOk={() => {
          list.push({ name: "drink" });
          setShowModal(false);
        }}
      />
      <button onClick={() => setShowModal(true)}>Show Modal</button>
    </div>
  )
}

export default Another

现在打开模态列表时列表不会重新呈现

【讨论】：

我认为唯一可行的是我的模态函数是从 2 个不同的地方调用的，我需要分别有 2 个函数吗？
如果你的应用程序需要从不同的地方调用 Modal，你可以使用 React Portal 和 Context API 来创建一个健壮的实现这是一个很好的跟进：levelup.gitconnected.com/… 在我看来是一个很棒的在 React 中处理模态的方法
当模态打开时，是否仍会使用上下文 API 重新渲染列表？
不一定，您可以像我在示例中所做的那样在另一个模块中创建模态。 “React Portal + ContextAPI”的主要好处是可以从任何地方分派事件并打开模态。因此，如果您将 Modal 和 List 分开，它不会重新渲染列表

【解决方案2】：

你可以使用 React.memo，更多信息请查看reactmemo

const List = React.memo(({ dataSource, loading }) => {
  console.log("render list");
  return (
    <div>
      {dataSource.map((i) => {
        return <div>{i.name}</div>;
      })}
    </div>
  );
});

sandbox here

【讨论】：

将元素添加到列表时似乎不会重新渲染
显然它不会渲染，因为您将列表声明为常量，因此参考保持不变，我建议您使用 useState 以便它可以为您更改它，我做了更新请检查@ 987654323@