使用vis.js的原生JavaScript项目迁移到React的最快方案是什么？

直接迁移的可行性 #

可以这么做，仅适合临时快速跑通的场景，不推荐作为长期正式方案使用。

临时快速跑通的操作步骤 #

• 优先通过npm安装对应vis组件包（比如vis-network/vis-timeline等你用到的子包），也可以将原有JS文件放入项目public目录，通过公开路径引入
• 原有HTML中的vis挂载容器可以放在React组件的render返回值中，建议用useRef获取容器DOM实例，不要使用原生的document.querySelector等全局DOM查找方法
• 原有原生JS逻辑全部放在useEffect钩子中执行，依赖项设置为空数组保证仅在组件挂载后执行一次，有动态更新需求再把对应变量加入依赖项

直接硬迁的已知问题 #

• React虚拟DOM更新和原生DOM操作会出现冲突，若其他组件逻辑修改了同层级DOM结构，很容易清空vis渲染内容或触发重复渲染
• 原有全局事件绑定、vis实例不会在组件卸载时自动销毁，会触发内存泄漏，页面多次进出后会出现卡顿、渲染异常等问题
• 原生逻辑无法和React状态流打通，后续需要新增React侧交互（比如用state控制vis节点更新、联动其他组件）时，维护成本极高

推荐的规范迁移方案 #

建议将vis逻辑封装为独立React组件，原有配置、数据都可以直接复用，同时符合React生命周期管理规则，示例代码如下：

import { useEffect, useRef } from 'react';
// 根据你用到的vis模块替换导入内容即可
import { Network } from 'vis-network';

const VisWrapper = ({ nodes, edges, visOptions }) => {
  const containerRef = useRef(null);
  const visInstanceRef = useRef(null);

  // 组件挂载时初始化vis实例
  useEffect(() => {
    if (!containerRef.current) return;
    visInstanceRef.current = new Network(
      containerRef.current,
      { nodes, edges },
      visOptions
    );

    // 组件卸载时自动销毁实例、清理内存
    return () => {
      if (visInstanceRef.current) {
        visInstanceRef.current.destroy();
        visInstanceRef.current = null;
      }
    };
  }, []);

  // 监听React侧数据变化，同步更新vis内容
  useEffect(() => {
    if (!visInstanceRef.current) return;
    visInstanceRef.current.setData({ nodes, edges });
  }, [nodes, edges]);

  return <div ref={containerRef} style={{ width: '100%', height: '600px' }} />;
};

export default VisWrapper;

你可以直接把原有项目的nodes、edges数据、vis配置项作为参数传入这个组件即可快速完成迁移。

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