React包裹非React重组件HeavyThing的疑问与优化咨询

问题1：将heavyThing实例存储在React状态中是否合理？ #

绝对不合理。React状态(useState)的更新会触发组件重渲染，而HeavyThing作为重型非React组件，它的内部状态变化完全不需要React追踪——你只需要持有实例控制权，不需要让React感知它的内部变化。

正确做法是用useRef存储实例：

• useRef的.current属性修改不会触发组件重渲染，完美适配这种不需要React追踪的外部实例。
• 初始化后直接修改ref的current值，无需通过状态更新触发重渲染。

问题2：如何避免props.data变化时无意义的重复执行clearData和addData？ #

必须添加依赖判断，否则每次组件重渲染（哪怕props.data实际没变化）都会执行这两个方法，完全浪费性能。

实现方式有两种：

1. 深比较+useEffect依赖数组：如果props.data是对象/数组，React的浅比较会误判新引用为数据变化，此时需要手动做深比较，只有数据真的改变时才执行更新。
2. 父组件缓存props.data：如果父组件每次渲染都会新建props.data对象，可以让父组件用useMemo缓存，确保只有数据真变化时才传递新引用。

优化后的完整代码 #

import { useState, useRef, useEffect } from 'react';
// 也可以用lodash.isEqual替代自定义的深比较函数
const isDeepEqual = (a, b) => {
  if (a === b) return true;
  if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null) return false;
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  if (keysA.length !== keysB.length) return false;
  for (const key of keysA) {
    if (!keysB.includes(key) || !isDeepEqual(a[key], b[key])) return false;
  }
  return true;
};

export default function HeavyComponentWrapper(props) {
  const elementRef = useRef();
  const heavyThingRef = useRef(null);
  const prevDataRef = useRef(props.data);

  // 仅在组件挂载时初始化HeavyThing
  useEffect(() => {
    const initHeavyThing = async () => {
      const h = new HeavyThing();
      await h.when();
      heavyThingRef.current = h;
      // 初始化后加载初始数据
      h.addData(props.data);
    };
    initHeavyThing();

    // 组件卸载时清理实例，避免内存泄漏
    return () => {
      heavyThingRef.current?.destroy?.();
    };
  }, []);

  // 监听props.data，仅当数据真变化时更新
  useEffect(() => {
    const instance = heavyThingRef.current;
    if (!instance) return;

    if (!isDeepEqual(props.data, prevDataRef.current)) {
      instance.clearData();
      instance.addData(props.data);
      prevDataRef.current = props.data;
    }
  }, [props.data]);

  return (
    <div className="targetDiv" ref={elementRef}>
    </div>
  );
}

额外优化建议 #

• 如果HeavyThing需要挂载到指定DOM节点，初始化时记得传入elementRef.current，比如new HeavyThing(elementRef.current)。
• 务必在组件卸载时调用HeavyThing的销毁方法（如果有），避免内存泄漏。
• 复杂数据结构下，优先使用成熟的深比较库（如lodash.isEqual），避免自定义函数的边界问题。

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