- Регистрация
- 21 Янв 2023
- Сообщения
- 895
- Автор темы
- #1
Что такое хуки?
Хуки (hooks) в React — это специальные функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах без необходимости писать классы
Основные хуки;
в React'е, есть несколько типов хуков, но важные (и часто используемые): userState, userEffect, useRef
1) - useState , используется например для состояния;
Хуки (hooks) в React — это специальные функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах без необходимости писать классы
Основные хуки;
в React'е, есть несколько типов хуков, но важные (и часто используемые): userState, userEffect, useRef
1) - useState , используется например для состояния;
JavaScript:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
return (
<div>
<p>Счёт: {count}</p>
<button onClick={increment}>+</button>
</div>
);
}useState создает переменную count, и функцию setcount для ее обновления
2) - useEffect,для выполнения кода при изменение данных (к примеру секундомеры\таймера)
2) - useEffect,для выполнения кода при изменение данных (к примеру секундомеры\таймера)
JavaScript:
import { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(s => s + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <p>Прошло секунд: {seconds}</p>;
}useEffect запускается при рендере (изменение кода на сайте, при режиме дебага) , и автоматом очищается при удаление элемента с кода
3) - useRef - для доступов к DOM, и хранения значений
3) - useRef - для доступов к DOM, и хранения значений
JavaScript:
import { useRef } from 'react';
function FocusInput() {
const inputRef = useRef(null);
function focus() {
inputRef.current.focus();
}
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focus}>Фокус</button>
</div>
);
}useRef получает доступ на DOM-элемент, без рендера
короче, простыми словами;
useSatate - для получения состояния,
useEffect - для выполнения кода,
useRef - для доступа к DOM-элемента
короче, простыми словами;
useSatate - для получения состояния,
useEffect - для выполнения кода,
useRef - для доступа к DOM-элемента
