BlockNoteJS主题优化：如何正确使用useMemo避免编辑器失焦问题

在基于React的富文本编辑器BlockNoteJS中，主题定制是一个常见需求。开发者可以通过创建自定义主题对象来改变编辑器的外观风格。然而，在实现过程中，一个容易被忽视的性能优化点可能导致编辑器出现意外行为——特别是编辑器失去焦点的问题。

问题背景

当开发者按照文档示例创建自定义主题时，通常会直接定义主题对象并传递给BlockNoteView组件。例如创建一个红色主题：

const lightRedTheme = {
  colors: {
    editor: {
      text: "#222222",
      background: "#ffdddd",
    },
    // 其他颜色定义...
  }
};

const darkRedTheme = {
  colors: {
    editor: {
      text: "#ffffff",
      background: "#660000",
    },
    // 其他颜色定义...
  }
};

然后将这些主题对象直接传递给组件：

<BlockNoteView
  editor={editor}
  theme={{
    light: lightRedTheme,
    dark: darkRedTheme,
  }}
/>

潜在问题

这种实现方式虽然简单直接，但在某些场景下会引发问题。特别是当组件状态更新触发重新渲染时：

1. 每次渲染都会创建新的主题对象
2. 即使主题内容没有变化，对象的引用也会改变
3. 在结合状态管理时（如使用useState存储编辑器内容），会导致编辑器意外失去焦点

示例中展示的问题场景：

const [blocks, setBlocks] = useState([]);

return (
  <BlockNoteView
    editor={editor}
    onChange={() => setBlocks(editor.document)}
    theme={{
      light: lightRedTheme,
      dark: darkRedTheme,
    }}
  />
);

解决方案

React的useMemo钩子可以完美解决这个问题。useMemo会记忆计算结果，只有在依赖项变化时才会重新计算：

const theme = useMemo(() => ({
  light: lightRedTheme,
  dark: darkRedTheme,
}), []); // 空依赖数组表示只计算一次

然后在组件中使用：

<BlockNoteView
  editor={editor}
  theme={theme}
/>

为什么这很重要

1. 性能优化：避免不必要的对象创建和垃圾回收
2. 稳定性：保持对象引用不变，防止编辑器不必要地重新初始化
3. 用户体验：解决编辑器意外失去焦点的问题，提供流畅的编辑体验

最佳实践建议

1. 对于所有静态配置对象（如主题），都建议使用useMemo进行记忆化
2. 将主题定义提取到组件外部或单独文件中，避免在组件函数体内重复定义
3. 对于大型主题配置，考虑使用CSS变量或设计系统来管理

BlockNoteJS团队已经注意到这个问题，并在文档中更新了相关示例，推荐开发者使用useMemo来优化主题配置。这一小小的改变可以显著提升编辑器的稳定性和性能表现。