React封装jQuery组件：如何正确编写useEffect？

问题背景 #

在jQuery向React迁移的场景中，用函数组件封装遗留jQuery组件时，es-lint/exhaustive-deps规则会对useEffect的依赖发出警告，同时需要兼顾：

• jQuery组件的初始化、更新、销毁流程
• 组件崩溃后的重建逻辑
• 避免将复杂的props转换辅助函数写入useEffect导致代码臃肿

实现方案 #

以下是符合React Hooks规范、解决依赖警告且覆盖所有场景的最终写法：

const MyReactFunctionComponent = (props) => {
  const elementRef = useRef(null);
  // 存储jQuery组件实例，无需触发重渲染
  const jqueryCompRef = useRef(null);
  // 存储最新的实例创建辅助函数，避免闭包问题
  const createHelperRef = useRef(null);

  // 封装props转换与jQuery实例创建逻辑，依赖props确保值最新
  const createJQueryComponent = useCallback(() => {
    // 保留你的props转换、辅助函数逻辑
    const jqueryProps = { ...props };
    return new myJQueryComponent(jqueryProps, elementRef.current);
  }, [props]);

  // 同步最新的辅助函数到ref，确保随时能拿到最新版本
  useEffect(() => {
    createHelperRef.current = createJQueryComponent;
  }, [createJQueryComponent]);

  // 初始化与销毁逻辑：仅在组件挂载/卸载时执行
  useEffect(() => {
    jqueryCompRef.current = createHelperRef.current();

    // 卸载时清理jQuery组件
    return () => {
      if (jqueryCompRef.current) {
        jqueryCompRef.current.destroy();
        jqueryCompRef.current = null;
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 处理props更新与组件崩溃重建：每次props变化时执行
  useEffect(() => {
    if (!jqueryCompRef.current) {
      // 组件崩溃后，用最新的辅助函数重建实例
      jqueryCompRef.current = createHelperRef.current();
    }
    // 调用jQuery组件自身的更新逻辑
    jqueryCompRef.current.update(props);
  }, [props]);

  return <div ref={elementRef} />;
};

关键细节说明 #

1. 用useRef管理实例：jqueryCompRef存储jQuery组件实例，避免使用useState触发不必要的重渲染，同时在销毁、重建时能直接访问最新实例。
2. 避免闭包问题：通过createHelperRef存储最新的createJQueryComponent函数，确保初始化和重建时能拿到最新的props转换逻辑，同时解决exhaustive-deps警告。
3. 拆分useEffect职责：
   • 第一个useEffect仅处理组件挂载初始化和卸载销毁，通过eslint注释忽略依赖警告（因已用ref同步最新函数）。
   • 第二个useEffect处理props更新与组件崩溃后的重建逻辑，依赖props确保每次props变化时触发更新。
4. 保留原有逻辑对齐：完全匹配类组件中的初始化、更新、重建、销毁逻辑，确保行为一致。

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