HOC - лучший выбор для начинающих программистов

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

Пример кода HOC, который добавляет функциональность логирования выполнения компонента:

const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} has rendered.`);
    }
    render() {
      return ;
    }
  };
};

В этом коде, мы создаем HOC с именем withLogger, который принимает обернутый компонент (WrappedComponent) и возвращает новый компонент. Этот новый компонент имеет метод componentDidMount(), который выполняет логирование в консоли при каждом монтировании компонента.

Чтобы использовать этот HOC, мы передаем компонент, который мы хотим обернуть:

const MyComponent = () => {
  return 
Hello World!
;
};
const MyComponentWithLogger = withLogger(MyComponent);

В данном примере, мы обернули MyComponent с помощью HOC withLogger и сохранили результат в MyComponentWithLogger. Теперь, когда мы используем MyComponentWithLogger, мы получим возможность логировать каждый раз, когда мы монтируем компонент.

ReactDOM.render(
  ,
  document.getElementById('root')
);