Javascript 高效地更新（呈现）新数据

我有一个组件，可以像这样获取一些数据

const data = fetch(API)
setState([...state, data])

我以列表形式将新数据附加到状态。 这就是我呈现数据的方式

return (state.map(d => <Component data={d}/>))

return（state.map（d=>））

---

当我添加越来越多的数据时，速度会越来越慢。有没有一种方法可以代替重新呈现现有组件，而只是将一个包含新数据的新组件附加到现有组件列表中

我猜您的应用程序正在变慢，因为即使数据保持不变，您的组件也会重新呈现。您可以在

中使用/来避免这种情况

---

此外，您还应该在

状态中使用唯一的.map，这对于避免不必要的重新渲染也很重要。
答案实际上取决于数据集的大小：


如果少于10000，可能会作出反应。备注+快速反应比较对您来说做得很好

从“React”导入React；
从“快速反应比较”中导入isEqual；
const YourComponent=props=>{…}
导出默认的React.memo（您的组件，isEqual）；


如果超过10000，您应该查看专门的库，例如
要渲染多少个组件？还有，您的数据看起来像什么，它们是什么类型的组件？有一个按钮供用户单击并获取数据。可以有很多，但当有3组以上的数据时，它们通常会变慢。呈现散点图和折线图，y轴标签有一些点击交互。这对非常大的数据集（例如超过10000个元素）没有帮助