Чем функции в React.js лучше классов

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

База

КлассыФункции
Классы или «классы компонентов». Их используют для определения компонентов и управления их состоянием и жизненным циклом. Компоненты классов расширяют класс React.Component и требуют большего количества шаблонного кода.Функциональные компоненты – это лаконичный и современный способ определения компонентов React. По сути, это JavaScript-функции, возвращающие JSX-элементы.

Почему разработчики выбрали функции

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

1. Простота и читаемость

Одна из основных причин – простота. Компоненты функций более лаконичны и легче читаются по сравнению с компонентами классов. Смотрите:

Классы:

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

Функции:

function MyComponent() {
  return <div>Hello, World!</div>;
}

2. Повышенная производительность

Функциональные компоненты обладают более высокой производительностью, чем компоненты классов. Это улучшение связано с внедрением React Hooks, которые позволяют функциональным компонентам эффективно управлять состоянием и побочными эффектами. Такие хуки, как useState и useEffect, упростили управление состоянием и операции жизненного цикла.

3. Возможность повторного использования

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

4. Hooks и управление состоянием

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

Что еще прочитать

Недавно мы писали, как экспортировать большую таблицу PostgreSQL с помощью Python. При работе с большими наборами данных таблицы PostgreSQL обычно извлекаются в файлы CSV для анализа и совместного использования. Но простой экспорт большой таблицы может привести к сбою компьютера из-за использования всей доступной оперативной памяти. Рассказываем, как решить этот вопрос при помощи Python.

Читайте также
Вышел Yarn 4.0 
Вышел Yarn 4.0 
Вышел Yarn 4.0 

Это приложение для менеджера пакетов, который создали Facebook, Google, Exponent и Tilde.

Разработчики Microsoft Store в новой веб-версии перешли с React на Shoelace, Lit, Vite и бэкенд на C# ASP.NET
Разработчики Microsoft Store в новой веб-версии перешли с React на Shoelace, Lit, Vite и бэкенд на C# ASP.NET
Разработчики Microsoft Store в новой веб-версии перешли с React на Shoelace, Lit, Vite и бэкенд на C# ASP.NET

У новой версии пользовательского интерфейса более простые способы поиска приложений и современный стек веб-технологий.

Shopify открывает Ruvy, инструментарий для создания Wasm-модулей из Ruby-кода
Shopify открывает Ruvy, инструментарий для создания Wasm-модулей из Ruby-кода
Shopify открывает Ruvy, инструментарий для создания Wasm-модулей из Ruby-кода

Ruvy от компании Spotify — это инструментарий WebAssembly, способный транслировать Ruby-код в модули Wasm, основанный на ruby.wasm. Ruvy реализован на языке Rust и содержит некоторые оптимизации для повышения производительности и упрощения выполнения Wasm-модулей.

Chrome 120 beta
Chrome 120 beta
Chrome 120 beta

Новые 7 фич для CSS. Улучшения для nesting (вложенности стилей). Создание «аккордиона» для через элемент details и многое другое.