如何在ReactJS项目中使用Infovis Library？

Infovis Toolkit是基于原生DOM实现的可视化库，和React适配的核心逻辑是单独预留一个不受React虚拟DOM管控的容器节点，所有JIT的渲染、更新逻辑都在原生DOM层面执行即可，官方示例的代码基本不用做大面积修改。

1. 安装依赖 #

执行命令安装JIT库：
npm install jit --save
如果npm安装有版本兼容问题，也可以直接下载JIT的编译后静态文件放到项目静态资源目录，在入口HTML中引入即可。

2. 编写React适配组件 #

这里以函数组件为例，核心是通过useRef拿到JIT要渲染的原生DOM容器，在useEffect中执行JIT的初始化、数据加载逻辑，组件销毁时回收JIT实例：

import React, { useRef, useEffect } from 'react';
import $jit from 'jit';

const InfovisDemo = () => {
  const jitContainerRef = useRef(null);

  useEffect(() => {
    if (!jitContainerRef.current) return;

    // 此处可直接照搬官方示例的初始化代码，仅修改injectInto参数即可
    const forceDirectedGraph = new $jit.ForceDirected({
      injectInto: jitContainerRef.current, // 重点：传入ref拿到的原生DOM节点，不要传DOM ID
      // 剩余配置完全复用官方示例的参数即可，宽高、节点样式、边样式、事件回调无需修改
      width: 600,
      height: 600,
      Node: {
        color: '#23A4FF',
        size: 10
      },
      Edge: {
        color: '#23A4FF',
        lineWidth: 0.8
      }
    });

    // 加载可视化数据，照搬官方示例的加载、渲染逻辑即可
    const graphData = {/* 官方示例对应的图数据结构 */};
    forceDirectedGraph.loadJSON(graphData);
    forceDirectedGraph.computeIncremental({
      iter: 40,
      property: 'end',
      onStep: () => {},
      onComplete: () => {
        forceDirectedGraph.animate({
          modes: ['linear'],
          transition: $jit.Trans.Elastic.easeOut,
          duration: 2500
        });
      }
    });

    // 组件卸载时销毁JIT实例，避免内存泄漏
    return () => {
      forceDirectedGraph.destroy && forceDirectedGraph.destroy();
    };
  }, []); // 依赖留空，初始化逻辑仅执行一次

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

export default InfovisDemo;

• 所有JIT的内部状态、实例都不要存到React的state中，避免触发不必要的React重绘导致渲染异常
• 如果需要联动React的状态更新JIT的可视化内容，单独写useEffect监听对应的状态变量，调用JIT自身提供的更新、重绘方法修改内容即可，不要直接操作JIT容器的DOM结构
• 类组件适配逻辑和函数组件一致，在componentDidMount生命周期中做初始化，componentWillUnmount中销毁实例即可
• 部分旧版本JIT会直接挂载在window对象上，如果import时找不到$jit变量，直接从window对象上取值即可

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