как ускорить процесс показа изображений в React из бэкэнда (Django Rest)

Question

У меня есть API в django, и я вызываю его из интерфейса ответной реакции, дело в том, что API должен вызываться бесконечно, и в каждом запросе от реакции всегда появляется новое изображение из ответа на запрос. Ответ приходитс хорошей скоростью, но скорость реакции, отображающей изображения, очень медленная, я отображаю изображения без перезагрузки всего компонента и хочу отобразить его без перезагрузки.

runInfinite=()=>{

        axios.post('http://127.0.0.1:8000/faceapp/process_image/')
            .then(res => {
                this.setState({baseimage: res.data}, () => {
                    console.log(this.state.baseimage)
                })
            });
    };

render() {

        if (this.state.flag){
            setInterval(()=> { this.runInfinite(); },1000);
        }
        return (
                  <div>
                            {this.state.baseimage?<img  src={"data:image/png;base64," +  this.state.baseimage}/>:<h1>Hello</h1>}
                  </div>

        );
    }
} 

Что я могу сделатьReact может отображать изображения с той же скоростью, что и ответ.

Answer 1

Вероятно, в этом случае реакция ничего не может сделать. Вам придется оптимизировать изображение и его размеры в соответствии с требованиями самой страницы.

Как, Вы можете начать с проверки необходимого разрешения.

Например, нет необходимости загружать изображение 4000 * 3000 в качестве заполнителя 400 * 300.

Answer 2

Я с трудом могу представить, что React слишком медленный для рендеринга изображения. Пожалуйста, подтвердите, откуда вы получаете фактическую задержку.

Кроме этого, у вас есть потенциальная проблема DoS.

Объединение setInterval (никогда не используйте setInterval) с запросом ввода-вывода(особенно для обработки данных) является рецептом для ошибки. Что происходит, когда вашему серверу для ответа требуется более 1000 мс? Ответ: несколько запросов начинают накапливаться и замедлять работу программы. Может ли это быть тем, что на самом деле происходит?

Избегайте этого поведения,

• Инициируя запрос на Promise или другой обратный вызов.
• Когда завершите, запустите логику на основена выходе.
• Затем перепланируйте запрос после того, как все это будет выполнено.