Справочное руководство по React

Справочник по React содержит различные основные API, хуки, методы жизненного цикла компонентов и многое другое.

Ниже представлен полный справочник по React, охватывающий все основные концепции от базовых до продвинутых (основан на современных практиках React 18+, с приоритетом функциональных компонентов + хуков). Каждая таблица включаетКонцепция/Синтаксис、Описание、Пример кодаиПримечания。

1. Основы JSX

Концепция/Синтаксис Описание Пример кода Примечания
Базовая структура JSX Синтаксис, похожий на HTML, компилируется вReact.createElement return <div>Hello</div>; Должен иметь один корневой элемент, можно использовать<></>Fragment
Встраивание выражений использовать{}Встраивайте JS-выражения (только выражения, не инструкции) <h1>{name.toUpperCase()}</h1> Поддерживает вычисления, переменные, тернарный оператор и т. д.
Привязка атрибутов class → className, for → htmlFor <div className="box" htmlFor="id"> Именование в camelCase (например,tabIndex）
Самозакрывающиеся теги Все теги должны быть закрыты <img src="....html" alt="..." /> Теги без дочерних элементов должны быть самозакрывающимися
Условный рендеринг Тернарный оператор или&& {isLogin ? <User /> : <Login />}<br>{count > 0 && <span>{count}</span>} &&Используется для "рендера, если существует"
Рендеринг списков использоватьmap(), нужно добавитьkey {items.map(item => <li key={item.id}>{item.name}</li>)} Ключ должен быть уникальным и стабильным, избегайте использования index
Комментарии использовать{/* */} {/* This is a comment */} Помещается внутри JSX
Fragment Пустой тег, избегает лишнего DOM <><p>1</p><p>2</p></>или<React.Fragment> Краткий синтаксис<></>Используется чаще

2. Основы компонентов

Концепция/Синтаксис Описание Пример кода Примечания
Функциональные компоненты (рекомендуется) Первая буква заглавная, возвращает JSX function App() { return <div>Hello</div>; } Современный предпочтительный вариант, без this
Классовые компоненты (устаревшие) ИспользуйтеclassНаследованиеReact.Component class App extends React.Component { render() { return <div/>; } } Только для понимания устаревшего кода
Передача пропсов Однонаправленный поток данных, от родителя к потомку <Child name="QiXin" age={25} /><br>Дочерний компонент:function Child({name}) {...} Только для чтения, нельзя изменить
Props по умолчанию defaultProps(Функциональные компоненты используют значения параметров по умолчанию) function Child({name = 'Guest'}) {...} Параметры по умолчанию ES6 более лаконичны
Проверка типов Props PropTypes (или TypeScript) Child.propTypes = { name: PropTypes.string.isRequired } Предупреждение в режиме разработки, удаляется в production
Композиция компонентов Вложенность, children <Card><h1>Title</h1></Card><br>Родитель:{props.children} children — специальный Prop

3. Состояние и хуки (ядро)

Хук / Концепция Описание Пример кода Примечания
useState Объявление переменной состояния const [count, setCount] = useState(0);<br><button onClick={() => setCount(c => c+1)}> Функциональное обновление в set предотвращает устаревшее состояние
useEffect Побочные эффекты (монтирование, обновление, очистка) useEffect(() => { ... }, [dep]);<br>Верните функцию очистки Пустой массив [] выполняется только при монтировании
useRef Храните изменяемые значения или ссылки на DOM const inputRef = useRef(null);<br>inputRef.current.focus(); Не вызывает повторный рендер
useContext Используйте Context, избегайте Prop Drilling const theme = useContext(ThemeContext); Работает с Context.Provider
useReducer Сложная логика состояния (аналогично Redux) const [state, dispatch] = useReducer(reducer, initial); Используется для нескольких связанных состояний
useMemo Кэшировать вычисленные результаты const memoValue = useMemo(() => compute(), [dep]); Избегать повторного выполнения дорогостоящих вычислений
useCallback Кэшировать ссылки на функции const handle = useCallback(() => {...}, [dep]); Оптимизировать Props дочерних компонентов
Пользовательские хуки Инкапсулировать переиспользуемую логику function useFetch(url) { ... return data; } Начинается с use

4. Жизненный цикл (классовые компоненты против хуков)

Этап Метод классового компонента Эквивалент в хуках Примечания
Монтирование constructor → render → componentDidMount useEffect(() => {…}, []) Инициализация состояния / вызовы API
Update shouldComponentUpdate → render → componentDidUpdate useEffect(() => {…}, [dep]) + memo Срабатывает при изменении зависимостей
Размонтирование componentWillUnmount useEffect возвращает функцию очистки Очистка таймеров/подписок
Обработка ошибок componentDidCatch Компонент ErrorBoundary У хуков нет прямого эквивалента

5. Контекст и глобальное состояние

Концепция Описание Пример кода Примечания
Context API Глобальный обмен данными const ThemeContext = createContext();<br><Provider value="dark"> Избегайте чрезмерного использования, затраты на производительность
useContext Использование в функциональных компонентах const theme = useContext(ThemeContext); Краткая замена Consumer

6. Расширенные возможности (React 18+)

Концепция Описание Пример кода Примечания
Конкурентный режим Прерываемый рендеринг, повышает отзывчивость <React.StrictMode> + Переходы Автоматическое пакетирование обновлений
Suspense Ленивая загрузка / ожидание загрузки данных <Suspense fallback={<Loading/>}><LazyComp /></Suspense> Работает с lazy
React.lazy Разделение кода и ленивая загрузка const Lazy = React.lazy(() => import('./Comp')); Должен быть обёрнут в Suspense
startTransition Помечать несрочные обновления startTransition(() => setQuery(e.target.value)); Сохранять отзывчивость UI
useDeferredValue Откладывать несрочные значения const deferred = useDeferredValue(query); Похоже на debounce ввода

7. Оптимизация производительности

Техника Описание Пример кода Примечания
React.memo Поверхностное сравнение Props, избегать ненужного рендеринга export default React.memo(Component); Только для функциональных компонентов
useMemo / useCallback Кэшировать значения/функции Как выше Предотвращать повторный рендеринг дочерних компонентов
Оптимизация ключей Стабильный и уникальный ключ например, рендеринг списка Избегать индекса
Виртуальный список Оптимизация длинных списков (react-window) <FixedSizeList height={500} itemCount={1000} /> Сторонняя библиотека

8. Распространённые инструменты экосистемы

Инструмент Назначение Установка/Использование Примечания
React Router v6 Маршрутизация и навигация npm i react-router-dom<br><BrowserRouter><Routes><Route path="/" element={<Home/>}/></Routes></BrowserRouter> Вложенные маршруты, Outlet
Redux Toolkit Глобальное управление состоянием npm i @reduxjs/toolkit react-redux Загрузка данных с RTK Query
React Hook Form Обработка форм useForm() Высокая производительность, простая валидация
Axios / Fetch Запросы данных fetch('/api') Используется в useEffect
Tailwind / MUI Стилизация UI npm i tailwindcssилиmui Быстрое оформление

9. Отладка и лучшие практики

Item Описание Инструмент/Метод
Инструмент отладки Просмотр дерева компонентов, Props, Hooks React DevTools (расширение браузера)
Строгий режим Выявление потенциальных проблем <React.StrictMode>
ESLint + Prettier Стандарты кода Расширение VS Code
Тестирование Jest + React Testing Library npm i --save-dev jest

Ниже приведены некоторые распространённые функции и методы вместе с их краткими описаниями:

Основной API React

createElement(type, [props], [...children])— Создаёт React-элемент или компонент.

Пример

import React from 'react';

const element = React.createElement('div', { className: 'container' }, 'Hello, World!');
// React.createElement возвращает React-элемент

cloneElement(element, [props], [...children])— Клонирует и возвращает React-элемент, которому можно передать новые props и дочерние элементы.

Пример

import React, { cloneElement } from 'react';

const parentElement = <div>Hello</div>;
const clonedElement = cloneElement(parentElement, { className: 'child' });
// clonedElement — это клонированный React-элемент с новым className

createFactory(type)- Создаёт фабричную функцию для создания React-элементов указанного типа.

Пример

import React from 'react';

const factory = React.createFactory('button');
const buttonElement = factory({ onClick: () => console.log('Button clicked') }, 'Click me');
// buttonElement — это React-элемент, созданный фабрикой, кликабельная кнопка

isValidElement(element)- Определяет, является ли объект допустимым React-элементом.

Пример

import React, { isValidElement } from 'react';

const element = <div>Hello</div>;
console.log(isValidElement(element)); // true

Children.map(children, function[(thisArg)])- Итерировать по дочерним элементам React и отображать их.

Пример

import React, { Children } from 'react';

const parentElement = (
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
);

const mappedChildren = Children.map(parentElement.props.children, child => (
  <li>{child}</li>
));
// mappedChildren — это отображённый список дочерних элементов

Методы жизненного цикла компонента React

constructor(props)- Конструктор, вызывается при создании компонента, используется для инициализации состояния и привязки методов.

Пример

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

componentDidMount()— Вызывается после монтирования компонента, обычно используется для побочных эффектов, таких как получение данных и подписки.

Пример

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // Подписаться на данные после монтирования компонента
    this.subscription = subscribeToData(data => {
      this.setState({ data });
    });
  }

  componentWillUnmount() {
    // Отписаться перед размонтированием компонента
    this.subscription.unsubscribe();
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

componentDidUpdate(prevProps, prevState)— Вызывается после обновления компонента, обычно используется для реагирования на изменения props или state.

Пример

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidUpdate(prevProps, prevState) {
    // Обновить данные при изменении props или state
    if (this.props.userID !== prevProps.userID) {
      this.fetchData(this.props.userID);
    }
  }

  render() {
    return <div>{this.props.userID}</div>;
  }
}

componentWillUnmount()- Вызывается перед размонтированием компонента, используется для освобождения ресурсов, например очистки таймеров и отписки.

Пример

import React, { Component } from 'react';

class MyComponent extends Component {
  componentWillUnmount() {
    // Очистить ресурсы перед размонтированием компонента
    clearInterval(this.timerID);
  }

  render() {
    return <div>{this.state.time}</div>;
  }
}

static getDerivedStateFromProps(props, state)- Используется для замены componentWillReceiveProps, обновляет состояние при изменении props.

Пример

import React, { Component } from 'react';

class MyComponent extends Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.userID !== prevState.userID) {
      return { userID: nextProps.userID };
    }
    return null;
  }

  render() {
    return <div>{this.state.userID}</div>;
  }
}

Хуки React

useState(initialState)- Объявить переменную состояния и функцию её обновления.

Пример

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми меня</button>
    </div>
  );
}

useEffect(callback, [dependencies])- Объявить операцию с побочным эффектом, аналогичную комбинации componentDidMount и componentDidUpdate.

Пример

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []); // Пустой массив в качестве второго аргумента означает, что он выполняется только при монтировании и размонтировании компонента

  return <p>Timer: {seconds} seconds</p>;
}

useContext(context)- Получить и подписаться на контекст React.

Пример

import React, { useContext } from 'react';

const MyContext = React.createContext('default');

function MyComponent() {
  const contextValue = useContext(MyContext);
  return <p>Значение контекста: {contextValue}</p>;
}

useReducer(reducer, initialState)- Объявить редьюсер и функцию dispatch для сложной логики состояния.

Пример

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

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

  return (
    <div>
      <p>Счётчик: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Увеличить</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Уменьшить</button>
    </div>
  );
}

useCallback(callback, [dependencies])- Кэшировать функцию обратного вызова, чтобы не создавать её заново при изменении зависимостей.

Пример

import React, { useState, useCallback } from 'react';

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={increment} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Увеличить счётчик</button>;
}

useMemo(factory, [dependencies])- Кэшировать вычисленное значение, чтобы не пересчитывать его при изменении зависимостей.

Пример

import React, { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(data);
  }, [data]);

  return <div>Дорогостоящее значение: {expensiveValue}</div>;
}

useRef(initialValue)- Создаёт постоянную ссылку, которую можно использовать для доступа к DOM-элементам или кэширования любого изменяемого значения.

Пример

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={() => inputRef.current.focus()}>Фокус на поле ввода</button>
    </>
  );
}

Другие распространённые функции

ReactDOM.render(element, container[, callback])- Отрисовать React-элемент в указанный DOM-узел.

Пример

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Привет, мир!</h1>;
ReactDOM.render(element, document.getElementById('root'));

ReactDOM.createRoot(container[, options])- Создать корневой экземпляр React, поддерживающий функции конкурентного рендеринга.

Пример

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

ReactDOM.unmountComponentAtNode(container)- Размонтировать React-компонент в указанном узле DOM.

Пример

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.unmountComponentAtNode(document.getElementById('root'));

ReactDOMServer.renderToString(element)- Отрисовать React-элемент в статическую строку HTML для серверного рендеринга.

Пример

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const element = <div>Привет, мир!</div>;
const htmlString = ReactDOMServer.renderToString(element);
Другие расширения