LiveBlocks React-Tiptap 组件在React编译器和shouldRenderOnTransaction下的渲染问题解析

问题背景

在使用LiveBlocks的react-tiptap扩展包时，开发者发现当同时使用React编译器或设置Tiptap编辑器的shouldRenderOnTransaction参数为false时，FloatingComposer组件无法正常显示。这是一个典型的编辑器状态同步问题，涉及到React渲染优化与编辑器状态管理的交互。

技术原理分析

Tiptap编辑器从2.5版本开始引入了性能优化机制，特别是shouldRenderOnTransaction: false选项可以显著减少不必要的重新渲染。然而，这种优化也带来了状态同步的挑战：

1. 编辑器状态隔离：当shouldRenderOnTransaction设为false时，编辑器状态变更不会自动触发React组件的重新渲染
2. 状态获取时机：直接访问editor.storage或plugin state可能获取的是过时的数据
3. React编译器影响：React的编译优化可能进一步干扰状态同步机制

问题表现

受影响的主要组件包括：

• FloatingComposer（评论输入框组件）
• FloatingThreads（浮动评论线程组件）
• AnchoredThreads（锚定评论线程组件）

这些组件共同的特点是都依赖于实时获取编辑器状态来判断是否应该显示。

解决方案

Tiptap官方提供了useEditorState Hook来专门解决这类性能优化场景下的状态同步问题。正确的实现方式应该是：

const currentEditorState = useEditorState({
  editor,
  selector: (ctx) => ({
    showComposer: !!ctx.editor?.storage.liveblocksComments?.pendingCommentSelection,
  }),
  equalityFn: (prev, next) => {
    if (!next) return false;
    return prev.showComposer === next.showComposer;
  },
});

对于插件状态的获取，也需要采用类似的模式：

const currentEditorState = useEditorState({
  editor,
  selector: (ctx) => {
    if (!ctx?.editor?.state) return null;
    const plugin = ctx.editor.state.plugins.find(
      (p) => p.key === "lb-threads-plugin$"
    );
    return {
      pluginState: plugin?.getState(ctx.editor.state),
    };
  },
  equalityFn: (prev, next) => {
    if (!prev || !next) return false;
    return isEqual(prev.pluginState, next.pluginState);
  },
});

最佳实践建议

1. 状态获取统一：所有依赖编辑器状态的组件都应使用useEditorState
2. 性能优化：合理设计equalityFn以减少不必要的重新渲染
3. 类型安全：虽然需要使用@ts-expect-error绕过某些类型检查，但应确保实际运行时的类型安全
4. 文档说明：在项目文档中明确说明shouldRenderOnTransaction: false时的特殊处理要求

总结

这个问题很好地展示了现代富文本编辑器开发中的典型挑战：如何在性能优化和功能完整性之间取得平衡。通过正确使用Tiptap提供的状态管理API，开发者可以既享受性能优化的好处，又不丢失关键的功能体验。LiveBlocks团队已经将此修复纳入2.11.1版本，为开发者提供了更稳定的开发体验。