Что такое компонент высшего порядка?

Что такое компонент высшего порядка?

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

Основной концепт

const EnhancedComponent = higherOrderComponent(OriginalComponent);

HOC — это паттерн, а не feature React. Это функция высшего порядка (принимает функцию и возвращает функцию).

Практические примеры

Пример 1: HOC для добавления свойств

const withAuth = (Component) => {
  return (props) => {
    const [isAuth, setIsAuth] = React.useState(false);
    
    React.useEffect(() => {
      checkAuth().then(auth => setIsAuth(auth));
    }, []);
    
    if (!isAuth) return <div>Требуется вход</div>;
    
    return <Component {...props} isAuth={isAuth} />;
  };
};

const ProtectedPage = withAuth(MyPage);
<ProtectedPage />

Пример 2: HOC для подписки на данные

const withData = (url) => (Component) => {
  return (props) => {
    const [data, setData] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
    
    React.useEffect(() => {
      fetch(url)
        .then(res => res.json())
        .then(data => {
          setData(data);
          setLoading(false);
        })
        .catch(err => {
          setError(err);
          setLoading(false);
        });
    }, [url]);
    
    return (
      <Component data={data} loading={loading} error={error} {...props} />
    );
  };
};

const UserList = withData('/api/users')(UserListComponent);

Пример 3: HOC для theme

const withTheme = (Component) => {
  return (props) => {
    const [theme, setTheme] = React.useState('light');
    
    const toggleTheme = () => {
      setTheme(theme === 'light' ? 'dark' : 'light');
    };
    
    return (
      <div className={`theme-${theme}`}>
        <Component theme={theme} toggleTheme={toggleTheme} {...props} />
      </div>
    );
  };
};

HOC vs Hooks vs Render Props

Hooks (современный стандарт):

function MyComponent() {
  const [data, loading] = useData('/api/users');
  return <div>{loading ? 'Загрузка...' : data}</div>;
}

Преимущества Hooks:

• Более читаемый код
• Проще с TypeScript
• Меньше вложенности компонентов
• Лучшая производительность

Когда использовать HOC?

• Переиспользование логики между компонентами
• Абстрахирование состояния
• Манипуляция props
• Обёртывание компонентов для кросс-каттинга

Потенциальные проблемы HOC

// Проблема: новая ссылка на функцию при каждом рендере
function MyComponent() {
  const hoc = withTheme(ChildComponent); // ПЛОХО!
  return <hoc />;
}

// Правильно: определи HOC вне компонента
const HocComponent = withTheme(ChildComponent);

function MyComponent() {
  return <HocComponent />;
}

Современный подход

В современном React Hooks стали стандартом:

const MyComponent = withData('/api/users')(Component);

function MyComponent() {
  const data = useData('/api/users');
  return <Component data={data} />;
}

HOC остаются полезными для интеграции с legacy кодом и специфических сценариев, но Hooks — предпочтительный способ повторного использования логики в современном React.