在Lit元素中嵌入React组件的性能优化及生命周期同步问题

问题背景 #

我们项目用Lit开发Web组件，通过Lit官方的React集成方案在React应用中调用这些组件。部分组件支持两个特性：

• 替换Lit HTML模板以修改渲染内容
• 组件数据可包含用于业务逻辑的Lit模板

为了让React开发者无需了解Lit，我们实现了一套基于createRoot和root.render的React组件转Lit模板逻辑。这套方案常规场景运行正常，但存在时序问题：Lit的生命周期会早于React组件渲染完成，偶尔引发功能异常或视觉bug。尝试用React测试工具act或旧版ReactDom.render时表现更稳定，但会触发报错信息。

可行解决方案 #

1. 用React useEffect同步渲染时机 #

在React侧封装Lit组件时，通过useEffect确保React DOM更新完成后，再将转换后的模板传递给Lit组件：

import { useRef, useEffect, useState } from 'react';
import { MyLitComponent } from './my-lit-component';

function ReactWrappedLitComponent({ reactContent }) {
  const litRef = useRef(null);
  const [isReactReady, setIsReactReady] = useState(false);

  // React DOM更新完成后标记状态
  useEffect(() => {
    setIsReactReady(true);
  }, [reactContent]);

  // 仅当React准备完毕，才传递模板给Lit
  return (
    <my-lit-component
      ref={litRef}
      lit-template={isReactReady ? convertReactToLitTemplate(reactContent) : null}
    />
  );
}

原理：useEffect回调会在React DOM渲染完成后执行，此时传递模板能确保Lit处理内容时，React侧的渲染已经完成。

2. 扩展Lit组件，手动控制生命周期 #

修改Lit组件，新增ready属性，只有当该属性为true时才执行后续渲染逻辑：

import { LitElement, html } from 'lit';

class MyLitComponent extends LitElement {
  static properties = {
    ready: { type: Boolean },
    litTemplate: { type: Object }
  };

  constructor() {
    super();
    this.ready = false;
  }

  // 重写update，仅ready时执行更新
  update(changedProperties) {
    if (!this.ready) return;
    super.update(changedProperties);
  }

  render() {
    if (!this.ready) return html``;
    return this.litTemplate;
  }
}
customElements.define('my-lit-component', MyLitComponent);

然后在React侧通过useEffect触发Lit的就绪状态：

useEffect(() => {
  if (litRef.current) {
    litRef.current.ready = true;
  }
}, [reactContent]);

3. 用flushSync强制React同步更新 #

如果需要确保React更新立即生效，可以用flushSync包裹状态更新，保证React DOM同步渲染后再通知Lit：

import { flushSync } from 'react-dom';

function ReactWrappedLitComponent({ reactContent }) {
  const [processedContent, setProcessedContent] = useState(null);
  const litRef = useRef(null);

  useEffect(() => {
    flushSync(() => {
      setProcessedContent(convertReactToLitTemplate(reactContent));
    });
    // React内容已同步渲染，触发Lit更新
    if (litRef.current) {
      litRef.current.requestUpdate();
    }
  }, [reactContent]);

  return <my-lit-component ref={litRef} lit-template={processedContent} />;
}

注意：flushSync会强制React同步更新DOM，可能影响性能，建议仅在必要场景使用。

4. 生产环境替代act：unstable_batchedUpdates #

act是测试专用API，但生产环境可以用unstable_batchedUpdates（虽带unstable标识，但实际已被广泛使用，未来可能稳定）批量处理更新，确保React渲染完成后再执行Lit逻辑：

import { unstable_batchedUpdates } from 'react-dom';

useEffect(() => {
  unstable_batchedUpdates(() => {
    const template = convertReactToLitTemplate(reactContent);
    if (litRef.current) {
      litRef.current.litTemplate = template;
    }
  });
}, [reactContent]);

该API会让React批量处理更新，确保DOM更新完成后再触发Lit的生命周期。

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