React-də funksional komponentlər — müasir inkişaf standartı

Functional Component nədir?

Functional Component (funksional komponent) — props obyektini qəbul edən və React-elementi qaytaran funksiya kimi təyin edilmiş React-komponentdir. React 16.8-dən əvvəl belə komponentlər stateless (vəziyyətsiz) adlanırdı, çünki onlar daxili vəziyyəti idarə edə bilmirdi.

React 16.8-də (fevral 2019) hookların meydana çıxması ilə funksional komponentlər vəziyyətə (useState), yan təsirlərə (useEffect), kontekstə (useContext) və referanslara (useRef) giriş əldə etdi. „Stateless" termini köhnəlib — müasir funksional komponentlər vəziyyəti tam idarə edir.

React rəsmi olaraq funksional komponentləri əsas üsul kimi tövsiyə edir. react.dev saytındakı bütün sənədlər, nümunələr, dərsliklər və yeni API-lər (Server Components, Actions) funksional yanaşmaya əsaslanır. Sinif komponentləri silinməyib, lakin React-in yeni imkanları yalnız hooklar vasitəsilə əlçatandır.

Funksional komponentin yaradılması

Ən sadə funksional komponent — JSX qaytaran funksiyadır. O, props-u arqument kimi qəbul edir, konstruktor, super çağırışı və ya this bağlanması tələb etmir. Props birbaşa funksiya arqumenti vasitəsilə əlçatandır — this.props yoxdur.

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

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

Vəziyyətə malik komponent

Vəziyyət əlavə etmək üçün useState istifadə edin. Hook iki dəyərdən ibarət kortej qaytarır: cari vəziyyət və setter-funksiya. Sinif komponentindəki this.setState-dən fərqli olaraq, useState dəyəri tamamilə əvəz edir, əvvəlki ilə birləşdirmir.

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>
  );
}

Funksional komponentlərdə hooklar

Hooklar müasir React-in əsasıdır. Hər bir hook konkret tapşırığı həll edir: useState — vəziyyət, useEffect — yan təsirlər, useContext — kontekstə giriş, useRef — DOM-elementlərinə istinadlar, useCallback və useMemo — memoizasiya.

Yan təsirlər üçün useEffect

useEffect eyni anda componentDidMount, componentDidUpdate və componentWillUnmount-u əvəz edir. Birinci arqument — effektli callback, ikincisi — asılılıqlar massividir. Massiv boşdursa, effekt mount-dan sonra bir dəfə icra olunur. Asılılıqlar göstərilibsə — onlardan hər hansı birinin hər dəyişməsində.

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>;
}

Xüsusi hooklar

Funksional komponentlərin əsas üstünlüyü — məntiqin təkrar istifadəsi xüsusi hooklar vasitəsilə. Sinif komponentində məntiq componentDidMount və componentDidUpdate arasında təkrarlanırdısa, funksional komponentdə o, use prefiksi olan ayrıca funksiyaya çıxarılır. Xüsusi hooklar HOC və render props-un əsas alternatifidir.

Miras əvəzinə kompozisiya

React komponentlər arasında kodun təkrar istifadəsi üçün kompozisiyanı tövsiyə edir, mirası yox. Funksional komponentlər kompozisiya üçün idealdır: bir komponent bir neçə başqasını ehtiva edə bilər, onlara props və children ötürərək.

children nümunəsi — komponent children prop vasitəsilə uşaq elementləri qəbul etdikdə — təbii şəkildə həyata keçirilir: function Layout({ children }). Vue-dən slots analoqu adlandırılmış props-komponentlər vasitəsilə həyata keçirilir: function Page({ header, sidebar, content }).

React-də miras praktiki olaraq istifadə edilmir. Hətta texniki cəhətdən extends-i dəstəkləyən sinif komponentləri nadir hallarda bir səviyyədən daha dərin iyerarxiyalar yaradır. Kompozisiyalı funksional komponentlər miras olmadan kodun təkrar istifadəsi ehtiyaclarını tam ödəyir.

Performans optimallaşdırması

Funksional komponentlər daxili optimallaşdırma mexanizmlərinə malikdir. React.memo — funksiyalar üçün PureComponent-in analoqu: props dəyişməyibsə, yenidən renderin qarşısını alır (səthi müqayisə). useMemo renderlər arasında hesablamaların nəticəsini keşləyir.

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>;
}

useCallback callback-funksiyaları memoizasiya edir ki, onlar hər renderdə yenidən yaradılmasın. Bu, funksiyaları React.memo-ya bükülmüş uşaq komponentlərə ötürərkən vacibdir: useCallback olmadan uşaq komponent hər dəfə yenidən render ediləcək, çünki funksiyaya istinad dəyişir.

Funksional və sinif komponentlərinin müqayisəsi

Yanaşmalar arasındakı fərq sintaksisdən kənara çıxır. Funksional komponentlər — bu domkənardır: vəziyyət və effektlər konkret renderə bağlıdır. Sinif komponentləri — bu this-dir: vəziyyət həmişə this.state-dən götürülür, asinxron callback-in icrası zamanı köhnəlmiş ola bilər.

Funksional komponentlər xətti icra axını təmin edir. Sinif komponentində əlaqəli məntiq çox vaxt bir neçə həyat dövrü metodu üzrə yayılır. Məsələn, WebSocket abunəliyi componentDidMount-da qurulur və componentWillUnmount-da silinir. Funksional komponentdə hər iki əməliyyat — təmizləmə funksiyası qaytaran bir useEffect-də.

TypeScript və funksional komponentlər

TypeScript funksional komponentlərlə siniflərdən daha təbii işləyir. Propsların tipləşdirilməsi — funksiya arqumenti üçün interfeys. Qaytarılan dəyərin tipi — JSX.Element və ya ReactNode. useState tipi ilkin dəyərdən avtomatik çıxarır.

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>
  );

Müasir TypeScript diskriminant birlik tipləri ilə useReducer-i, xüsusi hooklarda Generics-ləri və React.PropsWithChildren vasitəsilə children-in ciddi yoxlanmasını tipləşdirməyə imkan verir. TypeScript ilə funksional komponentlər əlavə abstraksiyalar olmadan tam tip təhlükəsizliyi verir.