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

1. Основа: понимание компонентов React

По своей сути компонент React — это функция или класс JavaScript, который принимает входные данные (реквизиты) и возвращает JSX, описывающий то, что должно появиться на экране.

Существует два основных типа компонентов:

• Функциональные компоненты: представленные как компоненты без сохранения состояния, они были разработаны для обработки состояния и побочных эффектов с помощью React Hooks. Большинство современных кодовых баз React предпочитают функциональные компоненты из-за их простоты и преимуществ в производительности.

  const Button = ({ label }) => {label};

• Компоненты класса: когда-то это был основной способ обработки состояния компонента, но они вышли из моды с появлением хуков. Однако их понимание может оказаться полезным при работе над устаревшими проектами.

class Button extends React.Component {
  render() {
    return {this.props.label};
  }
}

2. Создание повторно используемых компонентов

Многократно используемые компоненты — краеугольный камень любого масштабируемого приложения React. Вот несколько принципов, которым следует следовать:

а. Используйте реквизит эффективно

Props позволяют данным передаваться от родительского компонента к дочернему. При разработке повторно используемых компонентов убедитесь, что они принимают динамические свойства, чтобы сделать их гибкими для различных контекстов.

Пример: компонент кнопки с динамическими свойствами

const Button = ({ label, onClick, size = 'medium', variant = 'primary' }) => {
  return (
    
      {label}
    
  );
};

В этом примере кнопку можно использовать повторно, поскольку она принимает такие реквизиты, как метка, onClick, размер и вариант, что делает ее адаптируемой в приложении.

б. Композиция важнее наследования

Вместо расширения компонентов используйте композицию для создания более сложных компонентов. Этот подход соответствует философии React, заключающейся в том, чтобы сделать компоненты независимыми, разделенными единицами.

Пример: создание модального окна с помощью кнопки

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    

      

        {children}
        
      
    
  );
};

Компонент Modal состоит из компонента Button для создания модального окна многократного использования, которое можно заполнить любым содержимым (дочерними элементами).

3. Расширенные шаблоны компонентов

По мере роста вашего приложения простых компонентов может быть недостаточно. Вот несколько продвинутых шаблонов для управления сложностью.

а. Компоненты высшего порядка (HOC)

Компонент высшего порядка — это функция, которая принимает компонент и возвращает новый, часто добавляя дополнительные реквизиты или логику.

Пример: ведение журнала HOC

const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Component rendered with props:', props);
    return ;
  };
};

const EnhancedButton = withLogging(Button);

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

б. Рендеринг реквизита

Этот шаблон предполагает передачу функции в качестве свойства для совместного использования логики между компонентами.

Пример: выборка компонента с помощью реквизитов рендеринга

const Fetch = ({ url, render }) => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);

  return render(data);
};

// Usage
 
{JSON.stringify(data)}
} />;

Здесь Fetch не заботится о том, как отображаются данные. Вместо этого он делегирует рендеринг свойству render, что делает его очень гибким.

в. Пользовательские крючки

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

Пример: специальный крючок для ширины окна

const useWindowWidth = () => {
  const [width, setWidth] = React.useState(window.innerWidth);

  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
};

const MyComponent = () => {
  const width = useWindowWidth();
  return 
Window width: {width}
;
};

Этот хук useWindowWidth можно использовать в любом компоненте для отслеживания размера окна без дублирования логики.

4. Эффективное управление государством

Управление состоянием — один из наиболее важных аспектов проектирования компонентов React. Хотя локальное состояние хорошо работает для небольших приложений, для более крупных приложений может потребоваться более надежное решение.

а. Поднятие состояния

Когда нескольким компонентам необходимо иметь общее состояние, решение состоит в том, чтобы переместить (или «поднять») состояние к ближайшему общему предку.

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    

      
      
    
  );
};

б. Контекстный API

Контекстный API полезен для передачи глобальных данных через дерево компонентов без необходимости детализации свойств.

const ThemeContext = React.createContext();

const Parent = () => {
  const [theme, setTheme] = React.useState('light');

  return (
    
      
    
  );
};

const Child = () => {
  const theme = React.useContext(ThemeContext);
  return 
The theme is {theme}
;
};

Контекстный API отлично подходит для глобальных данных, таких как темы, пользовательские данные или региональные настройки.

в. Использование библиотек управления состоянием

Для более крупных приложений такие библиотеки, как Redux или Zustand могут помочь вам эффективно управлять сложными состояниями в вашем приложении. Redux отлично подходит для приложений, которым требуется централизованное состояние, а Zustand предлагает более легкое решение.

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

По мере роста вашего приложения производительность может стать проблемой. Вот несколько методов, позволяющих обеспечить быстроту и отзывчивость компонентов.

а. Мемоизация с помощью React.memo

React.memo предотвращает ненужные повторные рендеринги, запоминая выходные данные компонента на основе его свойств.

const ExpensiveComponent = React.memo(({ data }) => {

  return 
{data}
;

});

б. useCallback и useMemo

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

const MyComponent = ({ onClick }) => {

  const handleClick = React.useCallback(() => {

    console.log('Button clicked!');

  }, []);

return Click me;

};

Заключение

Освоение проектирования компонентов React необходимо для создания эффективных, масштабируемых веб-приложений. Сосредоточившись на повторно используемых компонентах, приняв расширенные шаблоны, такие как HOC и пользовательские перехватчики, эффективно управляя состоянием и оптимизируя производительность, вы можете создавать гибкие и удобные в обслуживании приложения.