Как я могу реорганизовать этот код React, чтобы сделать его более кратким?

Question

Привет, я пытаюсь перевести html5 canvas видео в React Application, в то же время сделав код максимально чистым. Какие улучшения необходимо сделать, чтобы улучшить предварительную производительность, используя React в его полном объеме?Любая помощь будет сильно оценена. Спасибо. Предполагается, что это стандартное приложение реагирования.

import React, { Component } from 'react';
import './App.css';
import video from './video.mp4';
import watermark from './watermark.png';

class App extends Component {
constructor() {
    super();
    this.state = {};
}

componentDidMount() {

const canvas = document.createElement('canvas');
canvas.width = 1280;
canvas.height = 720;
const context = canvas.getContext('2d');
context.drawImage(document.querySelector('video'), 0, 0, 720, 1280);
                    context.drawImage(
                        document.querySelector('.watermark'),
                        parseInt(document.querySelector('select').value),
                        parseInt(document.querySelector('select').value)
                    );
                    if (document.querySelector('input[name=live]').checked) {
                        this.setState({ image: canvas.toDataURL() });
                    }               

}


render() {
    const range = [];
    for (let i = 0; i < 1280; i++) {
        range.push(i);
    }

    return (
        <div className="app"> 

            <video  src={video} controls />

            <div>
            <div className="watermarkButton" style={{}}>

                <span className="watermarkButtonX">Watermark X
                <select className="positionX">
                    {range.map(i => (
                        <option key={i}>{i}</option>
                    ))} </select></span>

                <span className="watermarkButtonY">Watermark Y
                <select className="positionY">
                    {range.map(i => (
                        <option key={i}>{i}</option>
                    ))} </select></span>



                <span>Live</span>
                <input type="checkbox" name="live" />
                </div>


                <button className = "watermarkButton watermarkSubmit"
                    onClick={() => {
                        const canvas = document.createElement('canvas');
                        canvas.width = 1280;
                        canvas.height = 720;
                        const context = canvas.getContext('2d');
                        context.drawImage(document.querySelector('video'), 0, 0, 1280, 720);
                        context.drawImage(
                            document.querySelector('.watermark'),
                            parseInt(document.querySelector('.positionX').value),
                            parseInt(document.querySelector('.positionY').value)
                        );
                        this.setState({ image: canvas.toDataURL() });
                    }}> Watermark! </button>


                <img alt="watermarks" className="watermark" src={watermark} style={{ visibility: 'visible' }}  />
                <img alt="watermarks"   className="imageDisplay" height="405px" width="560px" src={this.state.image} />
            </div>
        </div>
    );
                }

            }

Экспорт по умолчанию Приложение;

Answer 1

Вы могли бы сэкономить время, предварительно составив диапазон и сделав его постоянным.Также, делая константы width и height, это предотвратит будущие ошибки.

Большая часть кода холста дублируется, вы можете добавить это в функцию.

Вот пример:

import React, {Component} from "react";
import "./App.css";
import video from "./video.mp4";
import watermark from "./watermark.png";

const width = 1280;
const height = 720;
const range = Array(5).fill().map((x, i) => <option key={i}>{i}</option>);

class App extends Component {

    constructor() {
        super();
        this.state = {};
    }

    componentDidMount() {
        this.canvasMagic(".watermark", "select", "select");
    }

    canvasMagic(el, x, y) {
        const canvas = document.createElement("canvas");
        canvas.setAttribute("width", width);
        canvas.setAttribute("height", height);
        const context = canvas.getContext("2d");
        context.drawImage(document.querySelector("video"), 0, 0, width, height);
        context.drawImage(
            document.querySelector(el),
            parseInt(document.querySelector(x).value),
            parseInt(document.querySelector(y).value)
        );
        if(document.querySelector("input[name=live]").checked) {
            this.setState({image: canvas.toDataURL()});
        }
    }

    render() {
        return (
            <div className="app">
                <video src={video} controls/>

                <div>
                    <div className="watermarkButton">

                        <span className="watermarkButtonX">Watermark X
                            <select className="positionX">{range}</select>
                        </span>

                        <span className="watermarkButtonY">Watermark Y
                            <select className="positionY">{range}</select>
                        </span>


                        <span>Live</span>
                        <input type="checkbox" name="live"/>
                    </div>


                    <button className="watermarkButton watermarkSubmit"
                            onClick={() => this.canvasMagic(".watermark", ".positionX", ".positionY")}> Watermark!
                    </button>

                    <img alt="watermarks" className="watermark" src={watermark} style={{visibility: "visible"}}/>
                    <img alt="watermarks" className="imageDisplay" height="405px" width="560px" src={this.state.image}/>
                </div>
            </div>
        );
    }
}

Надеюсь, это поможет,