使用YJS时React组件过度重渲染问题排查与求助

核心问题定位 #

你的问题根源在于y-webrtc的Awareness模块在触发更新时，会间接导致顶层组件的状态/引用发生变化，即使你用useMemo缓存了Provider，若监听逻辑处理不当，依然会触发不必要的重渲染。另外你提到的「无依赖useEffect不会在重渲染时执行」是正常行为——React中，空依赖的useEffect仅在组件挂载和卸载时执行，重渲染不会触发它。

具体解决方案 #

1. 确保Y.Doc与Provider的引用绝对稳定

Y.Doc和WebrtcProvider必须是单例对象，不能在组件重渲染时重复创建，否则会导致Awareness对象频繁更新：

import { useMemo } from 'react';
import * as Y from 'yjs';
import { WebrtcProvider } from 'y-webrtc';

// 在顶层组件中创建稳定的Y.Doc和Provider
const GrandParentComponent = () => {
  // 空依赖确保Y.Doc只创建一次
  const yDoc = useMemo(() => new Y.Doc(), []);
  // 依赖稳定的yDoc，确保Provider不会重复创建
  const provider = useMemo(() => new WebrtcProvider('your-room-id', yDoc), [yDoc]);
  
  // ...其他逻辑
};

2. 正确绑定Awareness监听，避免无意义的状态更新

监听Awareness变化时，要过滤掉自身客户端的更新，且只在必要时更新组件状态，同时必须清理监听：

import { useEffect, useState } from 'react';

const useAwareness = (provider) => {
  const [onlineUsers, setOnlineUsers] = useState([]);

  useEffect(() => {
    // 仅处理其他客户端的状态变化，排除自身更新
    const updateOnlineUsers = () => {
      const states = provider.awareness.getStates();
      const users = Array.from(states.entries())
        .filter(([clientId]) => clientId !== provider.awareness.clientID)
        .map(([id, state]) => ({ id, ...state }));
      // 仅当用户列表真的变化时才更新状态
      if (JSON.stringify(users) !== JSON.stringify(onlineUsers)) {
        setOnlineUsers(users);
      }
    };

    // 初始化用户列表
    updateOnlineUsers();
    // 绑定监听
    provider.awareness.on('change', updateOnlineUsers);
    // 组件卸载时清理监听
    return () => provider.awareness.off('change', updateOnlineUsers);
  }, [provider.awareness, onlineUsers]);

  return onlineUsers;
};

3. 隔离Awareness逻辑，避免污染顶层组件

将Awareness相关的状态和监听抽成自定义Hook，只在需要使用在线用户状态的子组件中调用，顶层组件无需处理Awareness的更新，从根源减少重渲染：

// 子组件中使用自定义Hook
const UserListComponent = ({ provider }) => {
  const onlineUsers = useAwareness(provider);
  return (
    <div>
      {onlineUsers.map(user => <div key={user.id}>{user.name}</div>)}
    </div>
  );
};

// 顶层组件仅传递稳定的Provider
const GrandParentComponent = () => {
  const yDoc = useMemo(() => new Y.Doc(), []);
  const provider = useMemo(() => new WebrtcProvider('room-id', yDoc), [yDoc]);

  return (
    <div>
      <EditorComponent yDoc={yDoc} />
      <UserListComponent provider={provider} />
    </div>
  );
};

4. 优化子组件的重渲染行为

如果必须传递Y.Doc或Provider给子组件，用React.memo包裹子组件，确保仅当props真正变化时才重渲染：

import { memo } from 'react';

const EditorComponent = memo(({ yDoc }) => {
  // 编辑器逻辑
});

5. 替换全局变量，用useRef管理状态

之前用全局变量处理数据库写入防抖的方式，换成useRef来保存状态，避免重渲染导致状态丢失：

import { useRef, useEffect } from 'react';

const useYDocSave = (yDoc) => {
  const timeoutRef = useRef(null);
  const lastSavedTimeRef = useRef(Date.now());

  const handleSave = () => {
    const now = Date.now();
    // 防抖1秒，避免频繁写入
    if (now - lastSavedTimeRef.current > 1000) {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      timeoutRef.current = setTimeout(() => {
        // 模拟写入数据库
        console.log('Saving document to DB');
        lastSavedTimeRef.current = now;
      }, 1000);
    }
  };

  useEffect(() => {
    yDoc.on('update', handleSave);
    return () => {
      yDoc.off('update', handleSave);
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, [yDoc]);
};

总结 #

解决问题的关键是：保证核心对象（Y.Doc、Provider、Awareness）的引用稳定，过滤不必要的Awareness更新，隔离状态逻辑避免污染顶层组件，同时用useRef和React.memo减少无意义的重渲染。

内容的提问来源于stack exchange，提问作者nusantara