当用户离开页面时，反应路由器组件不会销毁

Question

我有一个视频播放器（jsmpeg播放器），它打开了服务器的网络套接字以播放实时视频。视频服务器的工作方式是计算连接的客户端数量。它从> 0的客户端开始流式传输。这部分起作用。当我的视频播放器完全处于独立的react-app中时，当我关闭选项卡/重新打开时，它可以很好地处理所有事情。

我已调整为使用react-router。我想要相同的逻辑，但是要打开和关闭选项卡，我要转到新的react-router页面。我有一个主页和一个播放器页面。当我打开播放器页面时，它可以很好地工作，服务器会意识到客户端已连接并启动，但是当我返回主页时，它“保持活动”，并且似乎没有卸载/终止连接。当我返回播放器页面时，它将打开第二个连接，依此类推，直到关闭关闭所有客户端的选项卡。

当我离开页面时，如何关闭播放器？我想浏览player.js就像关闭选项卡一样起作用。当我导航回播放器时，该组件可以重新渲染/安装。

我的app.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
import Player from './components/Player.js';
class App extends Component {
  render() {
    return (
       <BrowserRouter>
        <div>
          <Navigation />
            <Switch>
             <Route path="/" component={Home} exact/>
             <Route path="/player" component={Player}/>
            <Route component={Error}/>
           </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

我的播放器

import React from 'react';
import JsmpegPlayer from './JsmpegPlayer';
import '../App.css';

const videoOptions = {
  poster: ''
};

const videoOverlayOptions = {autoplay: true};

const player = () => {
    return (
      <div>
        <header>
          <JsmpegPlayer
            wrapperClassName="video-wrapper"
            videoUrl="ws://<my ip>:9999"
            options={videoOptions}
            overlayOptions={videoOverlayOptions}
          />
        </header>
      </div>
    );
}

export default player;

jsmpeg播放器

import React, {Component} from 'react';
import JSMpeg from '@cycjimmy/jsmpeg-player';

export default class JsmpegPlayer extends Component {
  constructor(props) {
    super(props);

    this.els = {
      videoWrapper: null,
    };
  };

  render() {
    return (
      <div
        className={this.props.wrapperClassName}
        ref={videoWrapper => this.els.videoWrapper = videoWrapper}>
      </div>
    );
  };

  componentDidMount() {
    // Reference documentation, pay attention to the order of parameters.
    // https://github.com/cycjimmy/jsmpeg-player#usage
    console.log('I was triggered during componentDidMount')
    new JSMpeg.VideoElement(
      this.els.videoWrapper,
      this.props.videoUrl,
      this.props.options,
      this.props.overlayOptions
    );
  };
};

Answer 1

卸载组件时，您需要销毁JSMpeg实例。像创建实例一样保存实例，然后按this.videoPlayer = new JSMpeg.VideoElement(...)，然后在componentWillUnmount中调用this.videoPlayer.destroy()

您将需要对大多数第三方库执行此操作，因为该实例将继续存在于内存中，并且随着时间的推移会逐渐建立，从而导致内存泄漏