既存のライブラリのReactラッパー
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;
ずっと前にラッパーを書いた。もっと良い方法でできたのではないかと思います。私が行うことができる改善点やコードの問題点は何ですか。ありがとう。
回答
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() {
// ...
Reactが新しいコードを暫定的に推奨しているため、クラスベースのコンポーネントの代わりに機能コンポーネントを使用することも検討できますが、必須ではありません。
構造化されていない小道具
この行は読みにくいです：
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を使用してスタイルの一貫性を維持し、自動的に修正し、潜在的なバグがランタイムエラーになる前に警告することを検討してください。