Reactjs, как отображать часы без утечки памяти

Я создал простые часы в Reactjs (16.11.0), которые показывают время и обновляются каждую секунду. См. код ниже.

import React, {Component} from 'react';
import './clock.css'

class Clock extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            date: new Date()
        };
    }

    componentDidMount() {
        this.interval = setInterval(() => this.setState({date: new Date()}), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        let hour = ("0" + (this.state.date.getHours())).slice(-2);
        let minute = ("0" + (this.state.date.getMinutes())).slice(-2);
        let day = this.state.date.getDate();
        let month = this.state.date.toLocaleString('nb', {month: 'long'});
        return (
            <section className={'clock'}>
                <div>{hour + ':' + minute}</div>
                <div className={'date'}>{day + '. ' + month}</div>
            </section>
        );
    }
}

export default Clock;

При наблюдении за диспетчером задач в Chrome я вижу, что память вкладок со временем увеличивается. Для сайта, который должен работать в «киоске», это недопустимо. У моего Rasperrypi закончилась память через пару часов.

Мой пример приложения основан на чистом приложении «создать-реагировать» с добавленным этим компонентом «Часы».

Могу ли я что-нибудь сделать, чтобы предотвратить эту утечку памяти?

Обновить

Утечка памяти, похоже, происходит только при использовании хрома (и частично FireFox) на raspberrypi и по какой-то причине уменьшается при использовании этого флага «--disable-gpu-program-cache».


reactjs raspberry-pi memory-leaks chromium
person Spiff    schedule 30.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В вашем приложении нет ничего, что могло бы вызвать утечку памяти. Я также создал пример в codesandbox с вашим приложением, которое устанавливает состояние каждую миллисекунду, и использование памяти вкладки с приложением со временем не увеличивается (я проверял через диспетчер задач Chrome). Так что утечка, скорее всего, вызвана чем-то другим.

person Jeggettx    schedule 30.10.2019
comment
Спасибо, что заглянули! Я считаю, что вы правы, утечка вызвана чем-то другим. После небольшого тестирования я думаю, что проблема в хроме на моем raspberrypi. Моя страница не течет в Chrome на моем ноутбуке. С другой стороны, rpi съедает всю доступную память за ночь. (И ваши коды и коробка убили его за считанные минуты...) - person Spiff; 30.10.2019