Хуки в React: Полное руководство

1. Структура проекта в React

Правильная организация проекта помогает избежать хаоса и упростить поддержку кода. Вот рекомендуемая структура React-проекта:

my-react-app/
│── public/           # Статические файлы (index.html, favicon, изображения)
│── src/              # Исходный код приложения
│   │── components/   # Переиспользуемые компоненты
│   │── pages/        # Страницы приложения
│   │── hooks/        # Кастомные хуки
│   │── context/      # Контекстное хранилище
│   │── services/     # API-запросы, утилиты
│   │── styles/       # Стили (если используете CSS/SCSS)
│   │── App.js        # Главный компонент
│   │── index.js      # Точка входа
│── package.json      # Зависимости и настройки проекта
│── .gitignore        # Файлы, игнорируемые Git
│── README.md         # Документация проекта
    

2. Компоненты (Components)

React основан на компонентах — это строительные блоки интерфейса. Компоненты бывают функциональные и классовые.

Функциональные компоненты (рекомендуемый подход)

function Greeting(props) {
  return <h1>Привет, {props.name}</h1>;
}
    

Классовые компоненты (устаревший подход)

class Greeting extends React.Component {
  render() {
    return <h1>Привет, {this.props.name}</h1>;
  }
}
    

3. JSX (JavaScript XML)

JSX — это расширение синтаксиса JavaScript, позволяющее писать HTML-подобный код в React.

const element = <h1>Привет, мир!</h1>;
    

JSX позволяет вставлять переменные и выражения в разметку:

const name = "Алексей";
const element = <h1>Привет, {name}</h1>;
    

4. Пропсы (Props)

Props — это способ передачи данных от родительского компонента к дочернему.

function UserProfile({ name, age }) {
  return <p>{name} — {age} лет</p>;
}
    

Использование:

<UserProfile name="Алексей" age={25} />

5. Состояние (State) и хук useState

Состояние (state) управляет данными внутри компонента.

Использование useState

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}
    

6. Хуки (Hooks)

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

useState (управление состоянием)

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

useState позволяет добавить состояние в функциональные компоненты. Он возвращает массив с текущим значением состояния и функцией для его обновления.

useEffect (побочные эффекты)

useEffect(() => {
  console.log("Компонент смонтирован");
  return () => console.log("Компонент размонтирован");
}, []);
    

useEffect позволяет управлять побочными эффектами, такими как сетевые запросы, таймеры и манипуляции с DOM.

useContext (глобальное состояние)

const ThemeContext = React.createContext('light');
const theme = useContext(ThemeContext);
    

useContext позволяет получать данные из контекста React, предоставляя глобальное состояние для всего приложения или его частей.

useRef (ссылка на DOM-элемент)

const inputRef = useRef(null);
<input ref={inputRef} />
    

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

useReducer (альтернатива useState)

const [state, dispatch] = useReducer(reducer, initialState);
    

useReducer помогает управлять более сложными состояниями, например, в случаях с несколькими зависимыми состояниями.

useMemo (мемоизация значений)

const computedValue = useMemo(() => calculateValue(a, b), [a, b]);
    

useMemo помогает мемоизировать вычисления, чтобы избежать их повторного выполнения, если зависимости не изменились.

useCallback (мемоизация функций)

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
    

useCallback позволяет мемоизировать функции, чтобы избежать их создания при каждом рендере.

7. Обработка событий

React использует систему событий, похожую на обычные события DOM, но с особенностями. Пример:

function Button() {
  function handleClick() {
    alert("Кнопка нажата!");
  }
  return <button onClick={handleClick}>Нажми меня</button>;
}
    

8. React Router (Маршрутизация)

React Router используется для организации маршрутов и переходов между страницами приложения:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}