交换组件位置而不重新渲染

Question

我正在为聊天应用程序制作一个反应页面，其 UI 如下图所示（请忽略传感器信息的黑框）

在此页面中，我创建了 2 个独立的组件：

1. 红色边框组件显示列表对话。每个对话都是由 for 循环呈现的另一个组件。
2. 蓝色边框组件显示列表聊天消息。

以上两个组件已封装在聊天上下文中，其中包含列表对话、聊天消息数据...

使用stomp客户端连接websocket到java spring boot服务器实现的聊天机制。

为了用户体验（与其他聊天应用程序一样），我想按时间 DESC 对列表对话进行排序，不仅在初始化时，当新的聊天消息来自任何对话时，该对话应该被推到顶部。

目前我正在 JSX 中使用

list.sortByTime().forEach()

来生成列表对话。但是当列表对话发生变化时，整个页面将重新渲染（包括蓝色边框组件），这将使列表消息重新初始化，必须滚动到底部，在

type message

输入框处失去焦点，并且不方便。

我已经尝试过反应记忆，但仍然不起作用，我希望当新消息来自对话时，该对话组件应该被推送到列表对话的顶部，而无需重新渲染蓝色边框组件。

Answer 1

来自

useContext

文档

React 会自动重新渲染所有使用特定上下文的子级，从接收到不同值的提供者开始。前一个值和后一个值通过 Object.is 进行比较。使用备忘录跳过重新渲染并不会阻止子级接收新的上下文值。

如果红色和蓝色组件都消耗聊天上下文，则对该上下文值的任何更改都将重新渲染这两个组件。查看这个答案，了解在更新上下文值时避免重新渲染的技术。