Русский

Учебник ReactJS

Хуки

Расширенные функции ReactJS

Дополнительные концепции

ReactJS - Higher-Order Components: A Beginner's Guide

Привет, будущие маги React! Сегодня мы отправимся в увлекательное путешествие в мир Higher-Order Components (HOC) в ReactJS. Не волнуйтесь, если вы новички в программировании - я буду вашим доброжелательным проводником, и мы будем двигаться шаг за шагом. К концу этого руководства вы будете создавать HOC как профессионал!

ReactJS - Higher Order Components

Что такое Higher-Order Components?

Прежде чем мы погрузимся в это, давайте поймем, что такое Higher-Order Components. Представьте, что вы в ресторане сбургерами. Вы заказываете обычный бургер, но затем решаете добавить сыр, салат и бекон. Процесс добавления этих extras к вашему бургеру相似 с тем, что делают HOC в React!

На языке React, Higher-Order Component - это функция, которая принимает компонент и возвращает новый компонент с добавленной функциональностью. Это как особый соус, который улучшает ваши существующие компоненты, не изменяя их основных ингредиентов.

Вот простая аналогия:

// Это как наш обычный бургер
const PlainBurger = () => <div>?</div>;

// Это наш HOC, как добавление начинок
const addCheese = (Burger) => {
return () => (
<div>
<Burger />
<span>?</span>
</div>
);
};

// Это наш улучшенный бургер с сыром!
const CheeseBurger = addCheese(PlainBurger);

В этом примере, addCheese - это наш Higher-Order Component. Он принимает наш PlainBurger и возвращает новый компонент с добавленным сыром!

Как использовать Higher-Order Components

Теперь, когда мы понимаем концепцию, давайте посмотрим, как мы можем использовать HOC в более практической ситуации. Давайте представим, что у нас есть несколько компонентов, которые necesitan извлекать данные из API. Вместо того чтобы писать один и тот же код для извлечения данных в каждом компоненте, мы можем создать HOC, который будет делать это за нас.

Вот как мы можем это сделать:

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

// Это наш HOC
function withDataFetching(WrappedComponent, dataSource) {
return function(props) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch(dataSource)
.then(response => response.json())
.then(result => {
setData(result);
setLoading(false);
})
.catch(e => {
setError(e);
setLoading(false);
});
}, []);

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;

return <WrappedComponent data={data} {...props} />;
}
}

// Это простой компонент, который будет получать извлеченные данные
function UserList({ data }) {
return (
<ul>
{data.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}

// Мы используем наш HOC для создания нового компонента с возможностями извлечения данных
const UserListWithData = withDataFetching(UserList, 'https://api.example.com/users');

// Теперь мы можем использовать UserListWithData в нашем приложении!
function App() {
return (
<div>
<h1>User List</h1>
<UserListWithData />
</div>
);
}

Давайте разберем это:

  1. Мы определяем наш HOC withDataFetching. Он принимает два параметра: компонент, который мы хотим обернуть (WrappedComponent), и URL для извлечения данных (dataSource).

  2. Внутри withDataFetching, мы создаем и возвращаем новый функциональный компонент. Этот компонент использует React hooks для управления состоянием и побочными эффектами.

  3. Мы используем useState для управления是我们的 data, loading, и error состояния.

  4. Мы используем useEffect для извлечения данных при монтировании компонента. Как только данные будут извлечены, мы обновляем наше состояние соответствующим образом.

  5. В зависимости от состояния, мы либо показываем сообщение о загрузке, сообщение об ошибке, либо рендерим WrappedComponent с извлеченными данными.

  6. Мы создаем простой UserList компонент, который ожидает получить данные в качестве пропса и рендерит их.

  7. Мы используем наш HOC для создания нового компонента UserListWithData, который имеет возможности извлечения данных.

  8. Наконец, мы используем UserListWithData в нашем App компоненте.

Применение HOC компонентов

Теперь, когда мы видели, как создавать и использовать HOC, давайте рассмотрим некоторые常见的 случаи использования и лучшие практики.

HOC для аутентификации

Один из.commonных случаев использования HOC - это обработка аутентификации. Вот пример:

function withAuth(WrappedComponent) {
return function(props) {
const [isAuthenticated, setIsAuthenticated] = useState(false);

useEffect(() => {
// Проверка аутентификации пользователя
const token = localStorage.getItem('token');
setIsAuthenticated(!!token);
}, []);

if (!isAuthenticated) {
return <Redirect to="/login" />;
}

return <WrappedComponent {...props} />;
}
}

// Использование
const ProtectedComponent = withAuth(SensitiveDataComponent);

Этот HOC проверяет, аутентифицирован ли пользователь, перед рендерингом обернутого компонента. Если нет, он перенаправляет на страницу входа.

HOC для логирования

Другое полезное применение - добавление логирования к компонентам:

function withLogging(WrappedComponent) {
return function(props) {
useEffect(() => {
console.log(`Component ${WrappedComponent.name} mounted`);
return () => console.log(`Component ${WrappedComponent.name} unmounted`);
}, []);

return <WrappedComponent {...props} />;
}
}

// Использование
const LoggedComponent = withLogging(MyComponent);

Этот HOC логирует момент монтирования и демонтирования компонента, что может быть очень полезно для отладки.

Лучшие практики и соображения

工作时使用 HOC, имейте в виду следующие советы:

  1. Не мутируйте исходный компонент: Всегда комбинируйте исходный компонент с новой функциональностью.
  2. Передавайте unrelated props: Убедитесь, что вы передаете все пропсы, которые не специфичны для HOC.
  3. Максимально используйте composability: HOC должны быть способны комбинироваться с другими HOC.
  4. Оберните имя для легкого отладки: Используйте React.displayName, чтобы дать вашему HOC понятное имя в React DevTools.

Вот таблица, резюмирующая некоторые common HOC паттерны:

Паттерн Описание Пример использования
Props Proxy Manipulate props Добавление/изменение пропсов
Inheritance Inversion Расширение компонентного жизненного цикла Добавление логирования к методам жизненного цикла
Render Highjacking Управление рендерингом Условный рендеринг
State Abstraction Управление и предоставление состояния Извлечение и предоставление данных

помните, что Higher-Order Components - это мощный инструмент в вашем наборе React, но они не всегда являются наилучшим решением. С появлением Hooks в React, некоторые случаи использования HOC могут быть решены более изящно с помощью пользовательских hooks. Всегда учитывайте конкретные потребности вашего приложения при решении, использовать ли HOC, hooks или другие паттерны.

И вот и все,folks! Вы только что сделали свои первые шаги в мир Higher-Order Components в React. Практикуйте эти концепции, экспериментируйте со своими HOC, и вскоре вы будете компоновать компоненты, как дирижер Conducts оркестр. Счастливого кодирования!

Credits: Image by storyset

Предыдущий учебник:
ReactJS - Фрагменты
Следующий учебник:
ReactJS - Интеграция с другими библиотеками