react-network-vis自动调用network.fit()：如何阻止页面返回后自动执行？

方案1：禁用组件自动fit行为 #

react-network-vis的Network组件默认会在重新渲染（比如页面切换返回）时自动调用fit()。你可以通过设置组件的fit属性为false直接阻止这一默认行为：

<Network
  graph={graph}
  options={options}
  events={events}
  fit={false} // 关键：关闭自动fit
/>

如果需要在初始加载时执行一次fit适配视图，后续切换页面返回时不再执行，可结合状态控制：

class YourGraphComponent extends React.Component {
  state = {
    shouldFit: true
  };

  componentDidMount() {
    // 初始加载完成后，关闭自动fit
    setTimeout(() => {
      this.setState({ shouldFit: false });
    }, 500);
  }

  render() {
    return (
      <Network
        graph={graph}
        options={options}
        events={events}
        fit={this.state.shouldFit}
      />
    );
  }
}

方案2：保存并恢复视图状态 #

如果需要保留用户手动调整的视图位置（缩放、平移），可在组件卸载前保存视图状态，重新挂载时恢复：

class YourGraphComponent extends React.Component {
  networkInstance = null;
  viewState = {
    position: null,
    scale: null
  };

  // 卸载前保存视图状态
  componentWillUnmount() {
    if (this.networkInstance) {
      this.viewState = {
        scale: this.networkInstance.getScale(),
        position: this.networkInstance.getViewPosition()
      };
    }
  }

  // 挂载后恢复视图状态
  componentDidMount() {
    if (this.networkInstance && this.viewState.position) {
      this.networkInstance.moveTo({
        position: this.viewState.position,
        scale: this.viewState.scale,
        animation: false // 关闭动画避免闪烁
      });
    }
  }

  // 获取network实例
  handleNetworkReady = (network) => {
    this.networkInstance = network;
  };

  render() {
    return (
      <Network
        graph={graph}
        options={options}
        events={events}
        onReady={this.handleNetworkReady}
        fit={false}
      />
    );
  }
}

方案3：调整vis-network核心配置 #

在你的options中添加布局相关设置，禁用自动优化布局，配合已关闭的物理引擎，彻底避免布局重置：

const options = {
    layout: {
        improvedLayout: false // 禁用自动优化布局
    },
    physics: {
      enabled: false,
    },
    // ... 你的其他原有配置
};

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