Выполнять код каждую секунду (Таймер)

В React есть метод componentDidMount(), который выполняется после рендера компонента.

class App extends React.Component {

    // выполнять код после render()
    componentDidMount() {}

    render() {
        return (
            <div className="react-app">
                <p>Приложение React</p>
            </div>
        );
    }
}

В данном методе можно добавить JavaScript-функцию setInterval(), которая задаёт интервал выполнения указанного кода.

class Items extends React.Component {
    
    constructor(props) {
        super(props);
        
        // создать переменную "seconds"
        this.state = {seconds: 0};
    }
    
    componentDidMount() {
    	// выполнять код каждую секунду
    	setInterval(() =>
            this.setState({ seconds: this.state.seconds + 1 }),
            1000
        );
        
    }
    
    render() {
        return (
            <p>Прошло секунд: {this.state.seconds}</p>
        );
    }
}

// Вывод данных в элементе "#app"
ReactDOM.render(<Items />, document.getElementById("app"));

Пример кода на JSFiddle

Комментарии

Авторизуйтесь, чтобы добавлять комментарии