Функционалне компоненте у React-у — савремени стандард развоја

Шта је Functional Component?

Functional Component (функционална компонента) — React компонента дефинисана као функција, која прима прос објекат и враћа React елемент. Пре React 16.8 такве компоненте су се називале стателесс (без стања), јер нису могле да управљају унутрашњим стањем.

Са појавом хоокова у React 16.8 (фебруар 2019) функционалне компоненте су добиле приступ стању (усеСтате), бочним ефектима (усеЕффецт), контексту (усеЦонтеxт) и референцама (усеРеф). Термин „стателесс" је застарео — модерне функционалне компоненте у потпуности управљају стањем.

React званично препоручује функционалне компоненте као основни начин креирања компоненти. Цела документација на реацт.дев, примери, туторијали и нови АПИ-ји (Сервер Цомпонентс, Ацтионс) су засновани на функционалном приступу. Класне компоненте нису уклоњене, али нове могућности React-а су доступне само кроз хоокове.

Креирање функционалне компоненте

Најједноставнија функционална компонента — функција која враћа ЈСX. Она прима прос као аргумент, не захтева конструктор, позив супер или везивање тхис. Прос су доступни директно кроз аргумент функције — без тхис.прос.

// Functional component without state
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow function (common variant)
const Greeting = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

Компонента са стањем

За додавање стања користите усеСтате. Хоок враћа пар вредности: тренутно стање и сеттер функцију. За разлику од класног тхис.сетСтате, усеСтате замењује вредност у целини, а не спаја са претходном.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Хоокови у функционалним компонентама

Хоокови су основа модерног React-а. Сваки хоок решава одређени задатак: усеСтате — стање, усеЕффецт — бочни ефекти, усеЦонтеxт — приступ контексту, усеРеф — референце на ДОМ елементе, усеЦаллбацк и усеМемо — мемоизација.

усеЕффецт за бочне ефекте

усеЕффецт истовремено замењује цомпонентДидМоунт, цомпонентДидУпдате и цомпонентWиллУнмоунт. Први аргумент — цоллбацк са ефектом, други — низ зависности. Ако је низ празан, ефекат се извршава једном након монтирања. Ако су зависности наведене — при свакој промени било које од њих.

import React, { useState, useEffect } from 'react';

function UserData({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) setUser(data);
      });

    // Cleanup - analog of componentWillUnmount
    return () => { cancelled = true; };
  }, [userId]); // Dependency

  return <div>{user?.name}</div>;
}

Прилагођени хоокови

Главна предност функционалних компоненти — поновно коришћење логике кроз прилагођене хоокове. Ако се у класној компоненти логика дуплирала између цомпонентДидМоунт и цомпонентДидУпдате, у функционалној се извлачи у засебну функцију са префиксом усе. Прилагођени хоокови — главна алтернатива ХОЦ и рендер прос.

Композиција уместо наслеђивања

React препоручује композицију, а не наслеђивање за поновно коришћење кода између компоненти. Функционалне компоненте су идеалне за композицију: једна компонента може да садржи више других, преносећи им прос и цхилдрен.

Образац цхилдрен — када компонента прима елементе потомке кроз прос цхилдрен — имплементира се природно: function Layout({ children }). Аналогон слотс из Вуе-а имплементира се кроз именоване прос-компоненте: function Page({ header, sidebar, content }).

Наслеђивање у React-у практично се не користи. Чак и класне компоненте, које технички подржавају еxтендс, ретко формирају хијерархије дубље од једног нивоа. Функционалне компоненте са композицијом у потпуности покривају потребе за поновним коришћењем кода без наслеђивања.

Оптимизација перформанси

Функционалне компоненте имају уграђене механизме оптимизације. Реацт.мемо — аналогон ПуреЦомпонент за функције: спречава поновно рендеровање ако се прос нису променили (плитко поређење). усеМемо кешира резултат прорачуна између рендеровања.

import React, { useMemo } from 'react';

// React.memo - memoize component
const ExpensiveList = React.memo(({ items }) => {
  return <ul>
    {items.map(item =>
      <li key={item.id}>{item.name}</li>
    )}
  </ul>;
});

// useMemo - caching result
function Dashboard({ transactions }) {
  const summary = useMemo(() => {
    return transactions.reduce((acc, t) => acc + t.amount, 0);
  }, [transactions]);

  return <p>Total: {summary}</p>;
}

усеЦаллбацк мемоизира функције повратног позива како се не би поново креирале при сваком рендеровању. Ово је критично при преношењу функција у компоненте потомке умотане у Реацт.мемо: без усеЦаллбацк, компонента потомак ће се поново рендеровати сваки пут, јер се референца на функцију мења.

Поређење функционалних и класних компоненти

Разлика између приступа превазилази синтаксу. Функционалне компоненте — су затворење: стање и ефекти су везани за конкретно рендеровање. Класне компоненте — су тхис: стање се увек узима из тхис.стате, који може бити застарео у тренутку извршења асинхроног повратног позива.

Функционалне компоненте пружају линеарни ток извршења. У класној компоненти повезана логика је често распршена по неколико метода животног циклуса. На пример, претплата на WебСоцкет се поставља у цомпонентДидМоунт и уклања у цомпонентWиллУнмоунт. У функционалној компоненти обе операције — у једном усеЕффецт са функцијом чишћења.

TypeScript и функционалне компоненте

TypeScript са функционалним компонентама ради природније него са класама. Типизација просова — интерфејс за аргумент функције. Тип повратне вредности — JSX.Element или ReactNode. усеСтате аутоматски изводи тип из почетне вредности.

import React, { useState } from 'react';

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
}

const Button: React.FC<ButtonProps> =
  ({ label, variant = 'primary', onClick }) => (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );

Модерни TypeScript омогућава типизацију усеРедуцер са дискриминисаним унион типовима, Генерицс у прилагођеним хооковима и строгу проверу цхилдрен кроз React.PropsWithChildren. Функционалне компоненте са TypeScript-ом дају пуну безбедност типова без додатних апстракција.