Динамический рендеринг компонентов в React
2 года назад·1 мин. на чтение
В этой статье рассмотрим, как динамически добавлять или удалять компоненты в react.
Во-первых, нам нужно создать два новых компонента, чтобы мы могли использовать их для динамического рендеринга.
// userA.js import React from "react"; function UserA() { return ( <div> <h1>This is user A</h1> </div> ); } export default UserA;
// userB.js import React from "react"; function UserA() { return ( <div> <h1>This is user B</h1> </div> ); } export default UserB;
Создание динамического компонента
Теперь нам нужно создать динамический компонент, который поможет нам динамически визуализировать другие компоненты на основе пропсов.В приведенном выше коде мы сначала импортировали два компонента (// Dynamic.js import React from "react"; import UserA from "./userA"; import UserB from "./userB"; const components = { usera: UserA, userb: UserB }; function DynamicComponent(props) { const SelectUser = components[props.user]; return <SelectUser />; } export default DynamicComponent;
UserA
, UserB
), а затем добавили их в объект components
.
Внутри DynamicComponent
мы создали переменную SelectUser
и вернули ее. Таким образом, если мы передадим usera
в качестве пропса, то отрендерится компонент UserA
. Если мы передадим userb
в качестве пропса, отрендерится компонент UserB
.
Использование динамического компонента
Давайте теперь воспользуемся нашим динамическим компонентом, импортировав его.// App.js import React, { useState } from "react"; import DynamicComponent from "./Dynamic"; function App() { const [user, changeUser] = useState("usera"); return ( <div> {/* изначально отрендерится компонент UserA */} <DynamicComponent user={user} /> <button onClick={() => changeUser("usera")}>Switch user-a</button> <button onClick={() => changeUser("userb")}>Switch user-b</button> </div> ); } export default App;
Как использовать setInterval в React
год назад·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()
.