使用setInterval可以更好地表现

Question

我正在构建一个React应用。我有一个TimeZone页面。问题是，当前有12个不同的时区，为了显示时钟，我使用setInterval函数，每个人的延迟为1000 ms。问题是，有时页面冻结，而时钟跳动了它冻结的秒数。我想知道是否有更好的方法。

我尝试对所有内容进行硬编码，但是花了太多行，时区带有json，我调用了一个函数来构建每个单独的时钟。在这种情况下12次。

   criaRelogio = (city, flag, locale) =>{
        setInterval( () => this.setState({
                 data: new Date().toLocaleString("en-US", {timeZone: locale}),
            }),
           1000
        );

        moment.updateLocale('en', {
            weekdays : [
                "Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"
            ]
        });

        let data = new Date().toLocaleString("en-US", {timeZone: locale});

        let dataCompleta = moment(data);
        let hora = dataCompleta.hour();
        let minutos = dataCompleta.minutes();
        let segundos = dataCompleta.seconds();
        let diaExtenso = dataCompleta.format("dddd");

        if(hora < 10){
           hora = "0" + hora;
        }

        if(minutos < 10){
            minutos = "0" + minutos;
        }

        if(segundos < 10){
            segundos = "0" + segundos;
        }

        let classe = "timezone-clock"
        if(hora > 18 || hora < 6 ){
            classe = "timezone-clock noite";
        }
        let resultado = diaExtenso + " " +  hora + ":" + minutos + ":" + segundos;

        let retorno = <div>
                        <Clock
                            value={new Date(data)}
                            renderNumbers={true}
                            renderMinuteMarks={false}
                            renderHourMarks={true}
                            hourMarksWidth={0}
                            hourHandWidth={2}
                            minuteHandWidth={2}
                            minuteHandLength={80}
                            secondHandLength={80}
                            className={classe}
                        />
                        <article>
                                <img src={require('../../Images/'+flag+".png")} alt="BR"/><strong>{city}</strong>

                                <br></br>
                                {resultado}
                        </article>
                    </div> 
        return retorno;
    }

我希望冻结能够消失，并且页面运行更快，更流畅。