React中YASR组件重复渲染问题：如何更新而非重复挂载？

你的问题核心是每次result状态更新时都重新实例化YASR，导致组件重复渲染。要解决这个问题，关键是把YASR实例持久化，只初始化一次，状态更新时仅更新现有实例的内容。具体修改方案如下：

核心思路 #

• 用useRef存储YASR实例（useRef的current属性不会随组件渲染重置）
• 拆分初始化与更新逻辑：组件挂载时仅初始化一次YASR，result变化时仅调用实例的setResponse方法更新内容
• 用useRef获取DOM容器，替代全局getElementById，更符合React组件化规范

修改后的代码 #

React组件逻辑 #

const [result, setResult] = React.useState(null);
// 存储YASR实例
const yasrRef = React.useRef(null);
// 存储DOM容器引用
const yasrContainerRef = React.useRef(null);

// 初始化YASR：仅在组件挂载时执行一次
React.useEffect(() => {
  // 实例化YASR并保存到ref
  const yasrInstance = new YASR(yasrContainerRef.current, {
    getUsedPrefixes: {},
    drawOutputSelector: true,
    drawDownloadIcon: false,
  });
  yasrRef.current = yasrInstance;

  // 组件卸载时清理YASR实例（可选，避免内存泄漏）
  return () => {
    if (yasrRef.current) {
      yasrRef.current.destroy();
    }
  };
}, []); // 空依赖数组，仅执行一次

// 更新YASR响应：仅在result变化时执行
React.useEffect(() => {
  // 确保YASR实例存在且result有数据
  if (yasrRef.current && result?.data) {
    yasrRef.current.setResponse({
      data: result.data,
      contentType: "application/sparql-results+json",
      status: 200,
      executionTime: 1000,
    });
  }
}, [result]); // 依赖result，状态更新时触发

DOM元素修改 #

<div ref={yasrContainerRef}></div>

关键说明 #

1. useRef持久化实例：yasrRef.current会在组件整个生命周期内保留YASR实例，不会因组件重新渲染而被重置
2. 拆分Effect逻辑：初始化Effect只执行一次，避免重复创建YASR；更新Effect仅负责内容更新，不会触发组件重新挂载
3. DOM引用优化：用useRef绑定DOM元素，避免全局查找带来的潜在冲突，更符合React的组件隔离原则

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