现有库的反应性包装器

Question

https://github.com/BingXiong1995/react-flv-player/blob/master/lib/wrapper/ReactFlvPlayer.js

import React, { Component } from 'react';
import flvjs from './flv.min';
import PropTypes from 'prop-types';


class ReactFlvPlayer extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.flvPlayerRef = element => {
      this.flvPlayerRef = element;
    };
  }

  componentDidMount() {

    const {type , url, isLive, enableStashBuffer, stashInitialSize, hasAudio, hasVideo, handleError, enableWarning, enableError} = this.props;

    // 组件挂载后，拿到Ref进行操作
    if (flvjs.isSupported()) {
      const flvPlayer = flvjs.createPlayer({
        type,
        isLive,
        url,
        hasAudio,
        hasVideo
      },{
        enableStashBuffer,
        stashInitialSize
      });


      flvjs.LoggingControl.enableError = false;
      flvjs.LoggingControl.enableWarn = enableWarning;

      flvPlayer.attachMediaElement(this.myRef.current); // 将这个DOM付给第三方库
      flvPlayer.load();
      flvPlayer.play();
      flvPlayer.on('error', (err)=>{
        // console.log(err);
        handleError(err);
      });
    }
  }

  render() {
    const { height, width, isMuted,showControls } = this.props;
    return (
      <div>
        <video
          controls={showControls}
          muted={{isMuted}}
          ref={this.myRef}
          style={{height, width}}
        />
      </div>
    );
  }
}

ReactFlvPlayer.propTypes = {
  type: PropTypes.string,
  url: PropTypes.string.isRequired,
  isLive: PropTypes.bool,
  showControls: PropTypes.bool,
  hasAudio: PropTypes.bool,
  hasVideo: PropTypes.bool,
  enableStashBuffer: PropTypes.bool,
  stashInitialSize: PropTypes.number,
  height: PropTypes.string,
  width: PropTypes.string,
  isMuted: PropTypes.bool,
  enableWarning: PropTypes.bool,
  enableError: PropTypes.bool,
  handleError: PropTypes.func
};

ReactFlvPlayer.defaultProps = {
  type: 'flv',
  isLive: true,
  hasAudio: true,
  hasVideo: true,
  showControls: true,
  enableStashBuffer: true,
  stashInitialSize: 128,
  height: '100%',
  width: '100%',
  isMuted: false,
  handleError: (err)=>{console.log(err)},
  enableWarning: false,
  enableError: false
};

export default ReactFlvPlayer;

很久以前写过一些包装。我想知道我是否能以更好的方式做这件事。我可以做哪些改进，或者对代码有什么问题。谢谢。

Answer 1

flvPlayerRef?

在构造函数中，您有

this.myRef = React.createRef();
this.flvPlayerRef = element => {
  this.flvPlayerRef = element;
};

这很让人困惑。属性要么是函数，要么是元素，这取决于它以前是否作为函数被调用，而且无论哪种方式，它都不是一个引用，因此它也被错误命名。它也不在代码的其他地方使用，实例的使用者已经可以通过<video>属性获得对myRef元素的引用。

我将完全删除flvPlayerRef，并将信息不足的myRef属性名称重命名为videoRef或flvPlayerRef。

此时，您可以通过使用类字段而不是构造函数使事情变得简洁：

class ReactFlvPlayer extends Component {
  videoRef = React.createRef();

  componentDidMount() {
    // ...

您还可以考虑使用功能组件而不是基于类的组件，这是对新代码的临时建议，但这不是必需的。

非结构化道具

这一行很难读懂：

const {type , url, isLive, enableStashBuffer, stashInitialSize, hasAudio, hasVideo, handleError, enableWarning, enableError} = this.props;

当需要解构的属性超过2或3个时，我建议将每个属性放在单独的行中

const {
  type,
  url,
  isLive,
  // ...
} = this.props;

但是，在这种情况下，很大一部分属性只用于稍后传递给flvjs.createPlayer。考虑使用rest语法将这些选项收集到单个对象中，而不必单独指定每个选项：

const {
  enableStashBuffer,
  stashInitialSize,
  handleError,
  enableWarning,
  enableError,
  ...createPlayerOptions
} = this.props;

不使用enableError变量。如果这是故意的，最好不要从道具中提取出来。或者你打算把它分配给LoggingControl？变化

flvjs.LoggingControl.enableError = false;

至

flvjs.LoggingControl.enableError = enableError;

与其在检查是否支持flvjs之后创建另一个缩进块，不如考虑在不受支持的情况下尽早返回：

componentDidMount() {
  if (!flvjs.isSupported()) {
    return;
  }
  const {
    enableStashBuffer,
    stashInitialSize,
    handleError,
    enableWarning,
    enableError,
    ...createPlayerOptions
  } = this.props;

  const flvPlayer = flvjs.createPlayer(
    createPlayerOptions,
    {
      enableStashBuffer,
      stashInitialSize
    }
  );
  // etc

早期返回非常好，特别是具有更复杂的逻辑，否则需要多个级别的缩进，而缩进可能会变得非常难读。

间隔有几个地方，我希望看到一个空格，但在脚本的其余部分看不到任何给定的代码样式，或者我看到可能不存在的空格，比如const {type , url,、},{、(err)=>{、const { height, width, (您想要在销毁和使用对象时使用前导/尾随空间，还是不需要？)

无论您希望您的代码样式是什么，最好保持一致--考虑使用ESLint来保持样式的一致性，自动修复代码，并在可能的bug变成运行时错误之前警告您。