React wrapper cho thư viện hiện có

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;

Đã viết một số wrapper cách đây rất lâu. Tôi đang tự hỏi liệu tôi có thể làm điều đó theo cách tốt hơn không. Một số cải tiến mà tôi có thể thực hiện hoặc các vấn đề với mã là gì. Cảm ơn.

Answer 1

flvPlayerRef?

Trong hàm tạo, bạn có

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

Điều này khá khó hiểu. Thuộc tính là một hàm hoặc một phần tử, tùy thuộc vào việc nó được gọi là một hàm trước đó hay không, và theo cách nào đó, nó không phải là một ref, vì vậy nó cũng bị đặt tên sai. Nó cũng không được sử dụng ở bất kỳ nơi nào khác trong mã và người tiêu dùng của phiên bản đã có thể nhận được tham chiếu đến <video>phần tử thông qua thuộc myReftính.

Tôi muốn xóa flvPlayerRefhoàn toàn và cũng đổi tên thuộc tính ít thông tin hơn myRefthành videoRefhoặc thành flvPlayerRef.

Tại thời điểm đó, bạn có thể làm cho mọi thứ ngắn gọn bằng cách sử dụng các trường lớp thay vì một hàm tạo:

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

  componentDidMount() {
    // ...

Bạn cũng có thể cân nhắc sử dụng một thành phần chức năng thay vì một thành phần dựa trên lớp, như React dự kiến ​​đề xuất cho mã mới - nhưng điều đó không bắt buộc.

Đạo cụ bị phá hủy

Dòng này khó đọc:

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

Khi có nhiều hơn 2 hoặc 3 thuộc tính bị hủy, tôi khuyên bạn nên đặt mỗi thuộc tính trên một dòng riêng biệt

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

Tuy nhiên, trong trường hợp này, một phần đáng kể các thuộc tính chỉ được sử dụng để chuyển vào flvjs.createPlayersau. Hãy xem xét sử dụng cú pháp nghỉ ngơi để thu thập các tùy chọn đó vào một đối tượng duy nhất mà không cần phải chỉ định từng tùy chọn riêng lẻ:

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

Các enableErrorbiến không được sử dụng. Nếu đó là cố ý, tốt nhất không nên trích xuất nó khỏi đạo cụ ngay từ đầu. Hoặc có thể bạn muốn gán nó cho LoggingControl? Thay đổi

flvjs.LoggingControl.enableError = false;

đến

flvjs.LoggingControl.enableError = enableError;

Thụt lề nhỏ hơn Thay vì tạo một khối thụt lề khác sau khi kiểm tra xem flvjs có được hỗ trợ hay không, bạn có thể cân nhắc quay lại sớm nếu nó không được hỗ trợ:

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

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

Quay trở lại sớm là khá tốt, đặc biệt là với logic phức tạp hơn, nếu không sẽ yêu cầu nhiều mức độ thụt lề, có thể khá khó đọc.

Khoảng cách Có một vài nơi tôi mong đợi để xem một không gian nhưng không thấy bất kỳ cho phong cách mã trong phần còn lại của kịch bản, hoặc trong trường hợp tôi thấy không gian nơi có lẽ không nên có bất kỳ, giống như const {type , url,, },{, (err)=>{, const { height, width,(bạn có muốn không gian đầu / cuối khi cấu trúc và với các đối tượng, hay không?).

Dù bạn muốn phong cách mã của mình là gì, thì tốt nhất là nên nhất quán - hãy cân nhắc sử dụng ESLint để giữ cho phong cách của bạn nhất quán, tự động sửa mọi thứ và cảnh báo bạn về các lỗi tiềm ẩn trước khi chúng chuyển thành lỗi thời gian chạy.