用户离开页面时反应路由器组件不会破坏

Question

我有一个视频播放器（jsmpeg 播放器），它向服务器打开一个 websocket 来播放实时视频。视频服务器的工作方式是计算连接的客户端数量。它在客户端 > 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()

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