Как использовать setInterval в React
2 года назад·2 мин. на чтение
В этой статье рассмотрим использование функции setInterval в хуках react и компонентах на основе классов.
Что такое функция setInterval
?
Функция setInterval()
используется для многократного вызова функции или фрагмента кода через определенный промежуток времени.
Пример:
Единственный способ остановитьsetInterval(() => { console.log('you can see me every 3 seconds') }, 3000);
setInterval
— вызвать функцию clearInterval
с идентификатором или закрыть окно.
Использование setInterval
в React хуках
Мы можем использовать функцию setInterval
в React, точно так же, как мы можем использовать в JavaScript.
В приведенном ниже примере мы используем функцию setInterval
внутри хука useEffect
.
Хук// App.js import React, { useEffect, useState } from "react"; export default function App() { const [seconds, setSeconds] = useState(1); useEffect(() => { const timer = setInterval(() => { setSeconds(seconds => seconds + 1); }, 1000); // очистка интервала return () => clearInterval(timer); }); return ( <div className="App"> <h1>Number of seconds is {seconds}</h1> </div> ); }
useEffect
запускает функцию обратного вызова (колбэк) при подключении компонента к dom, что аналогично методу жизненного цикла componentDidMount
в компонентах-классах.
Функция setInterval
запускает метод setSeconds
каждую секунду.
Внутри хука useEffect
мы возвращаем функцию clearInterval
с аргументом timer
, так что функция setInterval
останавливается при отключении компонента от dom, что аналогично методу componentWillUnmount
.
Использование setInterval
в классовых компонентах
В этом примере показано, как использовать setInterval
в компонентах-классах.
В приведенном выше примере мы увеличиваем свойство// App.js import React from "react"; class App extends React.Component { state = { seconds: 1 }; componentDidMount() { this.timer = setInterval(() => { this.setState({ seconds: this.state.seconds + 1 }); }, 1000); } componentWillUnMount() { clearInterval(this.timer); } render() { return ( <div className="App"> <h1>Number of seconds is {this.state.seconds}</h1> </div> ); } } export default App;
this.state.seconds
с помощью функции setInterval()
.Как работать с input в ReactJS - onChange и value
2 года назад·1 мин. на чтение
В этой статье рассмотрим работу с элементом input в ReactJS.
Для чтения и изменения значения input нужны два пропа:
value
- определяет текущее значение инпута,onChange
- функция, которая вызывается, когда пользователь меняет значение инпута.
value
, и будем вызывать функцию изменения состояния в функции handleCnange
. В состояние будем записывать значение поля event.target.value
.
// MyInput.jsx import {useState} from 'react' export const MyInput = () => { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); } return ( <> <input type="text" value={value} onChange={handleChange} /> <p>Value: {value}</p> </> ) }