Хуки в React

Содержание

1. 1 Определения :
2. 2. Что такое крючок?
3. 🔸 Le Hook UseState() :
4. 🔸 Le Hook UseEffect():

1 Определения :

Чтобы объяснить концепцию хуков в React, важно начать с объяснения терминов, приведенных ниже:

✔️A React-компонент - это функция, которая отображает HTML-элемент. Компоненты React могут быть как классами, так и функциями.

✔️React классы-компоненты) используют жизненный цикл React для управления состоянием и событиями компонента.

✔️The Жизненный цикл React - это набор событий, которые происходят в течение жизни компонента React. События жизненного цикла позволяют разработчикам взаимодействовать с компонентом React в разные моменты его жизни.

✔️React Функции (компоненты функций) используют хуки для управления состоянием и событиями компонента.

2. Что такое крючок?

Хуки - это функции, которые позволяют разработчикам управлять состоянием и получать доступ к функциям жизненного цикла React без необходимости писать класс.

Чтобы объяснить, что такое хуки, можно использовать следующую аналогию:

Классы React похожи на стиральные машины. У них есть жизненный цикл, который позволяет им стирать белье.

Функции React похожи на стиральные машины без жизненного цикла. Они должны использоваться со специальными инструментами для стирки белья.

Hooks - это такие инструменты ⚙️ Они позволяют функциям React получать доступ к функциям жизненного цикла React.

🔸 Le Hook UseState() :

Хук useState() : Позволяет управлять состоянием компонента React.

function App() {
	const [number, setNumber] = useState(0);

	return (
		<div>
			<h1>Число: {number}</h1>
			<button onClick={() => setNumber(number + 1)}>+1</button>
		</div>
	);
}

Этот компонент React использует хук useState() для управления состоянием числа. Переменная number представляет собой текущее состояние числа. Функция setNumber() позволяет изменять состояние числа.

Хук ➡️The useState() возвращает 2 значения: текущее значение состояния и функцию, которая позволяет изменить состояние.

📌Существует множество хуков, каждый из которых имеет свое собственное назначение.

На 🗃️Here приведены некоторые из наиболее распространенных хуков:

• useState(): Позволяет управлять состоянием компонента React.
• useEffect(): Позволяет реагировать на изменения в окружении компонента React.
• useContext(): Позволяет получить доступ к контексту из компонента React.
• useReducer(): Позволяет управлять сложным состоянием компонента React.
• useParams() …..etc

🔸 Le Hook UseEffect():

Хук useEffect() позволяет компоненту React выполнять действия в определенное время и при изменении определенных свойств или состояния. Он полезен для выполнения побочных эффектов, таких как:

Получение данных Обновление DOM Добавление или удаление слушателей событий

Хук useEffect() принимает 2 аргумента: функцию и массив зависимостей :`

useEffect(() => { // Код для выполнения после рендеринга компонента // и после каждого обновления }, [dependency]);.

Функция ✔️The выполняется после рендеринга компонента и после каждого обновления. Таблица зависимостей ✔️The позволяет указать значения, которые должны вызывать выполнение функции. При изменении значения в массиве зависимостей функция будет выполнена.

Пример использования хука useEffect() для обновления DOM:

function App() {
	const [count, setCount] = useState(0);

	useEffect(() => {
		document.title = count;
	}, [count]);

	return (
		<div>
			<h1>Count: {count}</h1>
			<button onClick={() => setCount(count + 1)}>+1</button>
		</div>
	);
}

В этом примере хук useEffect() используется для обновления заголовка страницы каждый раз, когда изменяется значение переменной count. Это происходит потому, что переменная count включена в таблицу зависимостей.

Пример использования хука useEffect() для получения данных:

function App() {
	const [users, setUsers] = useState([]);

	useEffect(() => {
		fetch('https://api.github.com/users')
			.then((response) => response.json())
			.then((data) => setUsers(data));
	}, []);

	return (
		<ul>
			{users.map((user) => (
				<li key={user.id}>[user.login]</li>
			))}
		</ul>
	);
}

В этом примере хук useEffect() используется для получения данных из API GitHub. Функция выполняется только один раз, после первоначального рендеринга компонента. Это связано с тем, что таблица зависимостей пуста [ ] .

✔️Hooks - это мощный способ управления состоянием и побочными эффектами в компонентах React. ✔️The хук useEffect() особенно полезен для выполнения асинхронных операций, таких как выборка данных.

Пример: Добавление или удаление слушателей событий С помощью хука useEffect() можно добавлять или удалять слушателей событий в компоненте React.

Чтобы добавить прослушиватель событий, просто используйте функцию addEventListener() в функции хука useEffect().

Функция addEventListener() принимает два аргумента: событие, которое нужно прослушать, и функцию обратного вызова, которая будет вызвана при наступлении события.`

window.removeEventListener('click', handlclick]);

Вот пример добавления слушателя событий для щелчка по кнопке:

function App() {
	const [count, setCount] = useState(0);

	useEffect(() => {
		document.getElementById('button').addEventListener('click', () => {
			setCount(count + 1);
		});
	}, []);

	return (
		<div>
			<h1>Счет: {count}</h1>
			<button id="button">+1</button>
		</div>
	);
}