在反应中更新对象数组中的多个对象的正确方法是什么？

Question

为 stocks/crypto 制作关注列表应用程序以学习 React。

我有这种格式的监视列表状态（使用 useState 挂钩）：

      [
        { id: "1btc", name: "bitcoin", price: "7500" },
        { id: "1eth", name: "ethereum", price: "500" },
        { id: "2xmr", name: "monero", price: "200" },
        { id: "1ltc", name: "litecoin", price: "10" },
      ];

服务器每 3 秒通过 websocket 连接发送一批可用的价格更新。有时只有少数硬币有新信息，因此更新消息可能如下所示：

      [
        { id: "2xmr",  price: "225" },
        { id: "1btc",  price: "8600" },
      ];

是否可以更新关注列表，以便仅重新呈现列表中更新的硬币，而不是每次收到更新消息时都重新呈现整个列表？处理这种情况的最佳方法是什么？

Answer 1

您可以让每个对象都有自己的组件，然后在组件中传递对象属性，然后使用 React.memo() 这样它只会在检测到更改时才引起渲染。

默认情况下，它只会浅比较道具中的对象，这对你来说应该足够了。但是如果比较复杂，那你也可以自己写一个自定义函数。

根据文档

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

在反应中更新对象数组中的多个对象的正确方法是什么？

What is the proper way to update multiple objects in an array of objects in react?

reactjs