有什么比 refs 更好的方法来重新渲染多个组件之一吗？

问题描述

在我的 ReactJS 应用程序中，我需要显示从远程服务器获取的设备列表。它看起来像这样：

<App>
  {this.state.devices}
</App>

获取数据后，devices 状态将更新（更新为元素数组），因此应用程序将如下所示：

<App>
  <Device name="LH2" status="..."/>
  <Device name="LH3" status="..."/>
</App>

在呈现所有设备组件后，我希望我的应用程序检查任何设备状态的任何更改（通过使用 WebSocket 或不断获取服务器）并重新呈现它。我确实想过修改状态 devices 但如果我理解正确，所有 <Device /> 元素都将重新呈现，而其中一个或几个元素实际上会发生变化。在这种情况下，使用 refs 是我能想到的最好方法：

<App>
  <Device ref={refs[0]} name="LH2" status="..."/>
  <Device ref={refs[1]} name="LH3" status="..."/>
  ...
</App>

使用 refs，我不需要更新 devices 的状态，这可能会触发完整的重新渲染。我可以在需要时直接修改任何 <Device /> 元素。

但是我想知道是否有更好的方法来做到这一点？或者我什至需要首先使用 state.devices 吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-hooks reactjs reactjs refs