React 组件延迟渲染？如何优化聊天应用 UI 体验

javascript

2024-07-09 10:24:10

React 组件 UI 延迟 1-2 秒渲染问题解决指南

在实时聊天应用中，用户发送消息后，UI 界面应该立即更新以显示新的聊天气泡。然而，很多开发者都会遇到组件渲染延迟的问题，导致用户体验不佳。本文将分析这个问题的常见原因，并提供优化方案，帮助你提升应用的实时性。

问题根源

React 组件 UI 延迟渲染的原因有很多，其中一些常见情况包括：

频繁的 DOM 操作： React 的工作原理是每次渲染时创建虚拟 DOM 并与之前的版本进行比较，最终只更新实际 DOM 中发生变化的部分。如果你的组件在短时间内进行了大量的 DOM 操作，例如在循环中创建或删除元素，就会导致渲染过程变慢。想象一下，在一个拥有上千条消息的聊天窗口中，如果每条新消息的到来都触发整个消息列表的重新渲染，性能可想而知。
耗时的计算： 如果你的组件在渲染过程中执行了耗时的计算，例如复杂的排序算法或数据处理，也会导致渲染延迟。这就好比在聊天时，每次发送消息前都要进行复杂的加密运算，必然会影响消息发送的速度。
网络请求： 如果你的组件依赖于网络请求获取数据，而网络请求的响应时间较长，也会导致 UI 渲染延迟。这就像在网络信号不好的情况下发送消息，消息发送会滞后，直到网络恢复正常。

优化方案

针对上述问题，我们可以采取以下优化方案：

使用 key 属性： 在渲染列表时，为每个列表项添加唯一的 key 属性，可以帮助 React 识别哪些项发生了变化，从而优化渲染性能。 key 属性就像每个列表项的身份证，让 React 能够快速识别并更新变化的项，而不需要重新渲染整个列表。
```
{chats.map((message) => (
    <ChatBubble key={message.id} end={message.client === client}>
        <ChatBubble.Message>{message.message}</ChatBubble.Message>
    </ChatBubble>
))}
```
使用 React.memo 记忆组件： React.memo 可以记忆组件的渲染结果，避免不必要的重新渲染。如果你的组件接收的 props 没有发生变化，React.memo 会直接返回上一次的渲染结果，从而提高性能。这就像将组件的渲染结果缓存起来，当 props 没有改变时，直接使用缓存的结果，避免重复渲染。
```
const ChatBubbleMemo = React.memo(ChatBubble);

{chats.map((message) => (
    <ChatBubbleMemo key={message.id} end={message.client === client}>
        <ChatBubble.Message>{message.message}</ChatBubble.Message>
    </ChatBubbleMemo>
))}
```
使用 useCallback 记忆回调函数： 类似于 React.memo，useCallback 可以记忆回调函数，避免不必要的重新创建。在 React 中，如果父组件重新渲染，即使子组件的 props 没有改变，子组件也会重新渲染。使用 useCallback 可以避免这种情况，提高性能。
```
const handleSubmit = useCallback(async (e) => {
    e.preventDefault()
    if (message) {
        // ... your code
    }
}, [message, client, recipientEmail]); // 确保只在依赖项改变时重新创建函数
```
优化网络请求： 尽量减少网络请求的次数，例如可以使用缓存机制或者将多个请求合并成一个。
- 使用缓存: 将获取到的聊天记录缓存到组件的状态中，避免每次都发送网络请求。这就像将聊天记录存储在本地，当需要查看时，直接从本地读取，而不需要每次都从服务器获取。
- 合并请求: 可以考虑将发送消息和获取最新消息合并成一个请求，减少网络开销。例如，在发送消息后，可以将服务器返回的最新消息直接更新到本地聊天记录中，而不需要再发送一个获取最新消息的请求。
使用虚拟列表： 如果你的聊天记录非常多，可以使用虚拟列表来优化渲染性能。虚拟列表只会渲染当前可见区域的列表项，从而减少 DOM 元素的数量，提高渲染效率。

一些常用的虚拟列表库：
- react-virtualized
- react-window

代码示例

以下是一个优化后的 ChatWindow 组件代码示例：

import { useEffect, useState, useCallback } from 'react';
import { Button, Input, ChatBubble, Navbar, Textarea } from 'react-daisyui';
import axios from 'axios';

const api = `http://localhost:8000`;

function ChatWindow({ recipientNickname, recipientEmail }) {
  const client = window.localStorage.getItem('mail');
  const [chats, setChats] = useState([]);
  const [message, setMessage] = useState('');

  // 缓存聊天记录
  const [cachedChats, setCachedChats] = useState([]);

  const fetchChats = useCallback(async () => {
    try {
      const response = await axios.get(`${api}/users/messages?client=${client}&recipient=${recipientEmail}`);
      if (response.data) {
        setChats(response.data);
        // 更新缓存
        setCachedChats(response.data);
      } else {
        setChats([]);
        setCachedChats([]);
      }
    } catch (e) {
      console.log(e);
    }
  }, [client, recipientEmail]);

  useEffect(() => {
    fetchChats();
  }, [fetchChats]);

  const handleSubmit = useCallback(async (e) => {
    e.preventDefault();
    if (message) {
      // 发送消息并获取最新消息
      const response = await axios.post(`${api}/users/messages`, {
        client,
        recipient: recipientEmail,
        message,
      });
      
      // 使用最新的消息更新聊天记录和缓存
      setChats(prevChats => [...prevChats, response.data]);
      setCachedChats(prevChats => [...prevChats, response.data]);

      setMessage('');
    }
  }, [client, recipientEmail, message]);

  return (
    // ... your code
    <div className='chats' style={{ maxHeight: '75vh', overflowY: 'auto' }}>
        {cachedChats.map((message) => (
            <ChatBubble key={message.id} end={message.client === client}>
                <ChatBubble.Message>{message.message}</ChatBubble.Message>
            </ChatBubble>
        ))}
    </div>
    // ... your code
  );
}

export default ChatWindow;

常见问题解答

为什么我的聊天应用在发送大量消息后会变得卡顿？

这可能是因为组件频繁地进行 DOM 操作，导致渲染性能下降。尝试使用 key 属性、React.memo、useCallback 等优化方案来减少不必要的渲染。
如何避免网络请求导致的 UI 延迟？

可以尝试使用缓存机制，将获取到的数据缓存到组件的状态中，避免每次都发送网络请求。还可以考虑将多个请求合并成一个，减少网络开销。
虚拟列表适用于哪些场景？

如果你的聊天记录非常多，例如超过 1000 条，使用虚拟列表可以显著提高渲染性能。
React.memo 和 useCallback 有什么区别？

React.memo 用于记忆组件的渲染结果，而 useCallback 用于记忆回调函数。
如何选择合适的虚拟列表库？

react-virtualized 功能强大，但相对复杂；react-window 轻量级，易于使用。可以根据项目需求选择合适的库。