React Hooks: Современный подход к разработке
# React Hooks: Современный подход к разработке
## Введение
React Hooks были введены в React 16.8 и изменили способ написания компонентов. Хуки позволяют использовать состояние и другие возможности React без классов.
## Основные хуки
### useState
`useState` позволяет добавлять состояние в функциональные компоненты:
```javascript
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>
Нажми меня
</button>
</div>
);
}
```
### useEffect
`useEffect` позволяет выполнять побочные эффекты:
```javascript
import { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(data => setData(data));
}, []); // Пустой массив = выполнить только при монтировании
return <div>{data ? data.name : 'Загрузка...'}</div>;
}
```
### useContext
`useContext` упрощает работу с контекстом:
```javascript
import { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>Кнопка</button>;
}
```
## Создание собственных хуков
Вы можете создавать собственные хуки для переиспользования логики:
```javascript
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
});
}, [url]);
return { data, loading };
}
```
## Правила хуков
1. Вызывайте хуки только на верхнем уровне
2. Вызывайте хуки только из React функций
## Заключение
React Hooks делают код более чистым и переиспользуемым. Используйте их для современной разработки на React.