React JS — это популярная библиотека JavaScript, упрощающая процесс создания пользовательских интерфейсов. Одной из причин его популярности является наличие крючков. Хуки — это функции, которые позволяют разработчикам использовать функции React в функциональных компонентах. Двумя наиболее часто используемыми хуками являются useState и useEffect.
В этом блоге мы рассмотрим основы хуков useState и useEffect в React JS и предоставим несколько примеров их использования.
Хук useState
Хук useState используется для добавления состояния к функциональным компонентам. Состояние — это объект, который содержит данные, которые могут изменяться с течением времени. До введения хуков состояние можно было использовать только в компонентах на основе классов.
Синтаксис использования хука useState следующий:
const [stateName, setState] = useState(initialValue);
Здесь «stateName» — это имя переменной состояния, «setState» — это функция, которую можно использовать для обновления переменной состояния, а «initialValue» — начальное значение переменной состояния.
Пример:
import React, { useState } from 'react';
function Counter() {
const[count, setCount] = useState(0);
return ( <div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me </button>
</div> );
}
В этом примере компонент «Счетчик» использует хук useState для добавления состояния к компоненту. Переменная состояния называется «count», и ее начальное значение устанавливается равным 0. При нажатии кнопки вызывается функция «setCount» с новым значением «count + 1», которая обновляет переменную состояния и запускает повторную проверку. - визуализация компонента.
использоватьЭффект Крюк
Хук useEffect используется для выполнения побочных эффектов внутри функциональных компонентов. Побочные эффекты — это действия, которые могут выполняться вне обычного процесса рендеринга компонентов, например получение данных из API или обновление заголовка документа.
Синтаксис использования хука useEffect следующий:
useEffect(() => { // side effect code }, [dependencyArray]);
Здесь первый аргумент useEffect — это функция, содержащая код побочного эффекта. Второй аргумент — это необязательный массив зависимостей, который указывает, когда побочный эффект должен быть повторно запущен. Если массив зависимостей пуст, побочный эффект будет запущен только один раз при первом монтировании компонента.
Пример:
import React, { useState, useEffect } from 'react';
functionUserInfo(props) {
const [user, setUser] = useState(null);
useEffect(() =>{
fetch(`https://jsonplaceholder.typicode.com/users/${props.userId}`)
.then(response => response.json())
.then(data => setUser(data)); }, [props.userId]);
if (!user) { return <p>Loading user information...</p>; }
return ( <div>
<h2>{user.name}</h2>
<p>Email: {user.email}</p>
<p>Phone: {user.phone}</p>
</div> ); }
В этом примере компонент «UserInfo» использует хук useEffect для получения информации о пользователе из API. Побочный эффект срабатывает всякий раз, когда изменяется реквизит «userId». Если переменная состояния «пользователь» имеет значение null, отображается сообщение о загрузке. После получения информации о пользователе она отображается в компоненте.
Заключение
Хуки useState и useEffect — это мощные инструменты, которые позволяют разработчикам добавлять состояние и побочные эффекты к функциональным компонентам в React JS. Используя эти хуки, разработчики могут писать более краткий и выразительный код, при этом используя мощные функции React.
