Функциональные компоненты

Функциональные компоненты в Inferno представляют собой чистые функции, которые принимают props и возвращают виртуальный DOM. Они являются фундаментальной единицей построения интерфейсов и обеспечивают высокую производительность благодаря отсутствию лишней обвязки, присущей классовым компонентам.

import { render } from 'inferno';
import { Component } from 'inferno';

const Greeting = (props) => {
  return <h1>Привет, {props.name}!</h1>;
};

render(<Greeting name="Мир" />, document.getElementById('app'));

В данном примере Greeting — это функциональная компонента, которая принимает объект props и возвращает элемент JSX. JSX в Inferno компилируется в виртуальный DOM, который затем эффективно обновляется библиотекой.

Передача props

Props в функциональных компонентах неизменяемы и служат для передачи данных сверху вниз по дереву компонентов. Изменение props должно происходить только на уровне родительской компоненты.

const UserCard = ({ name, age }) => (
  <div>
    <h2>{name}</h2>
    <p>Возраст: {age}</p>
  </div>
);

render(<UserCard name="Алексей" age={30} />, document.getElementById('app'));

Ключевые моменты:

  • Деструктуризация props облегчает чтение кода.
  • Любые вычисления на основе props можно выполнять внутри функции перед возвратом JSX.

Использование хуков

Inferno поддерживает хуки для управления состоянием и побочными эффектами внутри функциональных компонентов. Основные хуки: useState, useEffect, useRef, useCallback и useMemo.

import { useState, useEffect } from 'inferno';

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Компонента смонтирована');
  }, []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onCl ick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
};

Особенности хуков в Inferno:

  • useState создаёт локальное состояние компоненты и возвращает текущее значение и функцию для его обновления.
  • useEffect позволяет выполнять побочные эффекты: загрузка данных, подписки, таймеры.
  • Все хуки должны вызываться только на верхнем уровне функции, вне условий и циклов.

Оптимизация функциональных компонентов

Inferno использует высокоэффективный механизм диффинга виртуального DOM, однако дополнительная оптимизация возможна:

  1. Pure Component через мемоизацию
import { memo } from 'inferno';

const ExpensiveComponent = ({ data }) => {
  // тяжелые вычисления
  return <div>{data}</div>;
};

export default memo(ExpensiveComponent);
  1. useCallback для функций
import { useCallback } from 'inferno';

const Button = ({ onClick }) => {
  const handleClick = useCallback(() => {
    console.log('Нажатие');
  }, []);

  return <button onCl ick={handleClick}>Клик</button>;
};
  1. useMemo для вычислений
import { useMemo } from 'inferno';

const List = ({ items }) => {
  const sortedItems = useMemo(() => items.sort(), [items]);
  return <ul>{sortedItems.map(item => <li key={item}>{item}</li>)}</ul>;
};

Вложенные функциональные компоненты

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

const Avatar = ({ src }) => <img src={src} alt="avatar" />;

const Profile = ({ user }) => (
  <div>
    <Avatar src={user.avatar} />
    <h3>{user.name}</h3>
  </div>
);

Преимущества вложенных компонентов:

  • Повышается читаемость кода.
  • Легче управлять отдельными частями интерфейса.
  • Упрощается повторное использование компонентов.

Обработка событий

События в Inferno привязываются через атрибуты, аналогично React. Поддерживаются стандартные события браузера.

const Clicker = () => {
  const handleClick = () => alert('Нажали на кнопку!');
  return <button onCl ick={handleClick}>Нажми меня</button>;
};

Особенности:

  • Inferno автоматически оптимизирует обработку событий через делегирование.
  • Не требуется явная привязка контекста, как в классовых компонентах.

Итоги по функциональным компонентам

  • Являются чистыми функциями, которые возвращают JSX.
  • Поддерживают хуки для управления состоянием и побочными эффектами.
  • Легко комбинируются и оптимизируются через мемоизацию и мемо-хуки.
  • Повышают производительность за счёт минимальной обвязки и эффективного диффинга виртуального DOM.
  • Обеспечивают чистый и читаемый код при построении сложных интерфейсов.

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

Оглавление