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

Question

在 @lexical/react 中，在没有依赖项数组的 useEffect 中注册编辑器命令是否有实质性的损失（性能或其他）？

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

  return unsubscribe
})

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

Answer 1

它相当便宜，在幕后我们只是 add/delete 来自一个地图和一个集合。但是，如果您必须这样做 none，它会更便宜。

useCommandSubscription 是一个 OK 抽象，一些（未经测试的）代码：

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]);

一个常见的用例是你一次收听多个commands/updates，你可以利用mergeRegister（来自@lexical/utils）：

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

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

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

Is it OK to un-subscribe and re-subscribe all my @Lexical/react command listeners on every render?

reactjs

lexicaljs