javascript - 当用户离开页面时，React 路由器组件不会销毁

Question

我有一个视频播放器(jsmpeg 播放器)，它打开一个到服务器的 websocket 来播放实时视频。视频服务器的工作方式是计算连接的客户端数量。它开始在客户端 > 0 处进行流式传输。这部分有效。当我的视频播放器位于独立的 react 应用程序中时，当我关闭选项卡/重新打开时，它可以很好地处理所有事情。

我调整为使用react-router。我想要同样的逻辑，但我不会打开和关闭选项卡，而是进入一个新的 react 路由器页面。我有一个主页和一个播放器页面。当我打开播放器页面时，它运行良好，服务器意识到客户端连接并启动，但是当我返回主页时，它“保持事件状态”，并且似乎没有卸载/结束连接。当我返回播放器页面时，它会打开第二个连接，依此类推，直到我关闭终止所有客户端的选项卡。

当我离开页面时如何关闭播放器？我希望离开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 ()

您需要对大多数第三方库执行此操作，因为实例将继续驻留在内存中，并且会随着时间的推移而累积，导致内存泄漏