Как использовать 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()
.Вопросы по React на собеседовании
2 года назад·3 мин. на чтение
В этой статье рассмотрим вопросы, которые могут встретиться на собеседовании по ReactJS на позицию React или frontend разработчика в 2023 году.
Что нового появилось в React 18?
1. Автоматический батчинг setState
В React 17 только React события будут обрабатываться пакетно, а нативные JavaScript события, промисы, setTimeout и setInterval обрабатываться не будут. В React 18 все события обрабатываются пакетно, т.е. несколько setState будут объединены в одно выполнение, что повышает производительность. На уровне данных несколько обновлений состояния объединяются в одну обработку (на уровне представления несколько визуализаций объединяются в одну визуализацию).2. Новый root API
В React 18 представлен новый root API, который поддерживает новый конкурентный рендеринг.// React 17 import React from "react" import ReactDOM from "react-dom" import App from "./App" const root = document.getElementById("root") ReactDOM.render(root, <App />) // unmount the component ReactDOM.unmountComponentAtNode(root) // React 18 import React from "react" import ReactDOM from "react-dom/client" import App from "./App" const root = document.getElementById("root") ReactDOM.createRoot(root).render(<App />) // unmount the component root.unmount()
3. Прекращение поддержки IE
Удалена поддержка браузера IE. Все новые функции, представленные React 18, основаны на современных браузерах. Если вам нужна поддержка IE, вам нужно вернуться к версии React 17.4. flushSync
Используется, чтобы заставить React сбросить всю ожидающую работу и синхронно обновить DOM.import React, {useState} from "react" import {flushSync} from "react-dom" const App = () => { const [count, setCount] = useState(0) const [count2, setCount2] = useState(0) return ( <div className="App"> <button onClick={() => { // первое обновление flushSync(() => { setCount(count => count + 1) }) // второе обновление flushSync(() => { setCount2(count2 => count2 + 1) }) }}>click</ button > <span>count: {count}</ span > <span>count2: {count2}</ span > </div> ) } export default App
5. Возвращаемое значение React компонента
В React 17 для возврата пустого компонента можно использовать только null, а явное возвращение undefined вызовет ошибку. В React 18 поддерживается возвратnull
и undefined
.
6. Поддержка useId
Генерирует один и тот же уникальный идентификатор на сервере и клиенте, чтобы избежать несовместимости при гидратации.
7. Concurrent mode (Конкурентный режим)
Конкурентный режим — это не фича, а архитектура. Это помогает приложениям оставаться отзывчивыми, подстраиваясь под производительность устройства пользователя и скорость сети, а также устраняет блокировку механизмов рендеринга, делая рендеринг прерываемым. В React несколько состояний могут быть обновлены одновременно. Разница в том, чтобы синхронные непрерываемые обновления стали асинхронными прерываемыми обновлениями.useDeferredValue
и startTransition
используются для обозначения несрочного обновления.
Почему React компоненты не могут возвращать несколько элементов?
Почему компоненты React могут иметь только один корневой элемент?- Компонент React в конце будет скомпилирован в функцию рендеринга, и возвращаемое значение функции может быть только одно. Если он не обернут в отдельный корневой узел, несколько значений будут возвращаться параллельно, что не допускается в JavaScript.
class App extends React.Component{ render() { return( <div> <h1 className="title">Hello</h1> <span>World</span> </div> ) } // После компиляции class App extends React.Component { render() { return React.createElement('div', null, [ React.createElement('h1', {className:'title'}, 'Hello'), React.createElement('span', null, 'World') ] ) } }
- Виртуальный DOM React представляет собой древовидную структуру, и корневой узел дерева может быть только один. При наличии нескольких корневых узлов невозможно подтвердить, какое дерево нужно обновить.
Как компоненты React могут возвращать несколько компонентов?
- Используя HOC (Higher Order Functions)
- Используя
React.Fragment
, вы можете добавить список элементов в группу, не создавая дополнительных узлов.
renderList() { list.map((item, key) => { return ( <React.Fragment> <tr key={item.id}> <td>{item.name}</td> <td>{item.age}</td> <td>{item.address}</td> </tr> </React.Fragment> ) }) }
- Используя массив
renderList(){ list.map((item, key) => { return [ <tr key={item.id}> <td>{item.name}</td> <td>{item.age}</td> <td>{item.address}</td> </tr> ] }) }
Каковы способы общения между React компонентами?
Существует множество способов взаимодействия компонентов, которые можно разделить на следующие категории:- Взаимодействие родительского компонента с дочерним компонентом
- Дочерний компонент взаимодействует с родительским компонентом
- Общение между соседними элементами
- Родительский компонент взаимодействует с дочерними компонентами
- Связь независимых компонентов