reactjs - 可以在每次渲染时取消订阅并重新订阅我的所有 @Lexical/react 命令监听器吗？

Question

在@lexical/react中，在没有依赖数组的useEffect中注册编辑器命令是否会带来重大损失(性能或其他)？

useEffect(() => {
  const unsubscribe = editor.registerCommand(
    KEY_ENTER_COMMAND,
    event => { /* ... */ },
    COMMAND_PRIORITY_HIGH
  )

  return unsubscribe
})

这是对 Lexical 的内部要求，还是仅仅是调用一个额外的简单函数的问题？或者这种方法还有其他缺点吗？

Answer 1

它相当便宜，在幕后我们只需从 map 和集合中添加/删除即可。但如果您不必执行这些操作，则会更便宜。

useCommandSubscription 是一个不错的抽象，一些(未经测试的)代码:

function useCommandSubscription<T>(command: LexicalCommand<T>, fn: CommandListener<T>, priority: CommandListenerPriority): void {
  const [editor] = useLexicalComposerContext();
  useLayoutEffect(() => {
    return editor.registerCommand(command, fn, priority);
  }, [editor]);
}
useCommandSubscription(FOO_COMMAND, () => { ... }, priority);

但请注意如何进一步优化我们提供的开箱即用功能:

useEffect(() => {
  // You can return immediately, no need to store the cleanup function in a variable
  return editor.registerCommand(...);
}, [editor]);

一个常见的用例是您一次监听多个命令/更新，您可以利用mergeRegister(来自@lexical/utils):

useEffect(() => {
  return mergeRegister(
    editor.registerCommand(..),
    editor.registerCommand(..),
    editor.registerUpdateListener(..),
}, [editor]);

旁注:聆听按键输入命令时要小心。 Android 与组合一起工作，不会触发按键输入事件。根据您的用例，您可能想要探索 INSERT_LINE_BREAK_COMMAND、INSERT_PARAGRAPH_COMMAND、基于 LineBreakNode 或 ParagraphNode 的转换或突 rebase 于这两个节点的监听器。