React-da funksional komponentlar — zamonaviy rivojlanish standarti

Functional Component nima?

Functional Component (funksional komponent) — props obyektini qabul qiladigan va React-elementni qaytaradigan funksiya sifatida belgilangan React-komponentdir. React 16.8 dan oldin bunday komponentlar stateless (holatsiz) deb nomlangan, chunki ular ichki holatni boshqara olmasdi.

React 16.8 (fevral 2019) da huklarning paydo bo'lishi bilan funksional komponentlar holatga (useState), yon ta'sirlarga (useEffect), kontekstga (useContext) va havolalarga (useRef) kirish imkoniga ega bo'ldi. „Stateless" atamasi eskirgan — zamonaviy funksional komponentlar holatni to'liq boshqaradi.

React rasmiy ravishda funksional komponentlarni asosiy usul sifatida tavsiya qiladi. react.dev saytidagi barcha hujjatlar, misollar, darsliklar va yangi API-lar (Server Components, Actions) funksional yondashuvga asoslangan. Sinf komponentlari olib tashlanmagan, ammo React-ning yangi imkoniyatlari faqat huklar orqali mavjud.

Funksional komponent yaratish

Eng oddiy funksional komponent — JSX qaytaradigan funksiya. U propsni argument sifatida qabul qiladi, konstruktor, super chaqiruvi yoki this bog'lashni talab qilmaydi. Props to'g'ridan-to'g'ri funksiya argumenti orqali mavjud — this.props yo'q.

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

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

Holatga ega komponent

Holat qo'shish uchun useState dan foydalaning. Huk ikkita qiymatdan iborat kortejni qaytaradi: joriy holat va setter-funksiya. Sinf komponentidagi this.setState dan farqli o'laroq, useState qiymatni to'liq almashtiradi, avvalgisi bilan birlashtirmaydi.

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 komponentlarda huklar

Huklar zamonaviy React-ning asosidir. Har bir huk aniq vazifani hal qiladi: useState — holat, useEffect — yon ta'sirlar, useContext — kontekstga kirish, useRef — DOM-elementlarga havolalar, useCallback va useMemo — memizatsiya.

Yon ta'sirlar uchun useEffect

useEffect bir vaqtning o'zida componentDidMount, componentDidUpdate va componentWillUnmount o'rnini bosadi. Birinchi argument — effektli callback, ikkinchisi — bog'liqliklar massivi. Agar massiv bo'sh bo'lsa, effekt mount dan keyin bir marta bajariladi. Agar bog'liqliklar ko'rsatilgan bo'lsa — ulardan birortasining har o'zgarishida.

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

Maxsus huklar

Funksional komponentlarning asosiy afzalligi — mantiqni qayta ishlatish maxsus huklar orqali. Agar sinf komponentida mantiq componentDidMount va componentDidUpdate o'rtasida takrorlansa, funksional komponentda u use prefiksli alohida funksiyaga chiqariladi. Maxsus huklar HOC va render props ning asosiy alternativasidir.

Meros o'rniga kompozitsiya

React komponentlar o'rtasida kodni qayta ishlatish uchun kompozitsiyani tavsiya qiladi, merosni emas. Funksional komponentlar kompozitsiya uchun ideal: bir komponent bir nechta boshqalarni o'z ichiga olishi mumkin, ularga props va children uzatadi.

Children namunasi — komponent children prop orqali bola elementlarni qabul qilganda — tabiiy ravishda amalga oshiriladi: function Layout({ children }). Vue dan slots analogi nomlangan props-komponentlar orqali amalga oshiriladi: function Page({ header, sidebar, content }).

React-da meros amalda ishlatilmaydi. Hatto texnik jihatdan extends-ni qo'llab-quvvatlaydigan sinf komponentlari kamdan-kam hollarda bir darajadan chuqurroq ierarxiyalar hosil qiladi. Kompozitsiyali funksional komponentlar merossiz kodni qayta ishlatish ehtiyojlarini to'liq qoplaydi.

Unumdorlikni optimallashtirish

Funksional komponentlar o'rnatilgan optimallashtirish mexanizmlariga ega. React.memo — funksiyalar uchun PureComponent analogi: props o'zgarmagan bo'lsa, qayta renderlashni oldini oladi (yuzaki taqqoslash). useMemo renderlar o'rtasida hisoblash natijalarini keshlaydi.

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-funksiyalarni memizatsiya qiladi, shunda ular har bir renderda qayta yaratilmaydi. Bu funksiyalarni React.memo ga o'ralgan bola komponentlarga uzatishda muhim: useCallback bo'lmasa, bola komponent har safar qayta renderlanadi, chunki funksiyaga havola o'zgaradi.

Funksional va sinf komponentlarini solishtirish

Yondashuvlar orasidagi farq sintaksisdan tashqariga chiqadi. Funksional komponentlar — bu yopilish: holat va effektlar aniq bir render bilan bog'langan. Sinf komponentlari — bu this: holat har doim this.state dan olinadi, u asinxron callback bajarilishi vaqtida eskirgan bo'lishi mumkin.

Funksional komponentlar chiziqli bajarish oqimini ta'minlaydi. Sinf komponentida bog'liq mantiq ko'pincha bir nechta hayotiy sikl metodlari bo'ylab tarqaladi. Masalan, WebSocket obunasi componentDidMount da o'rnatiladi va componentWillUnmount da olib tashlanadi. Funksional komponentda ikkala operatsiya — tozalash funksiyasini qaytaradigan bitta useEffect ichida.

TypeScript va funksional komponentlar

TypeScript funksional komponentlar bilan sinflardan ko'ra tabiiyroq ishlaydi. Propslarni tiplash — funksiya argumenti uchun interfeys. Qaytariladigan qiymat turi — JSX.Element yoki ReactNode. useState turni boshlang'ich qiymatdan avtomatik ravishda chiqaradi.

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

Zamonaviy TypeScript diskriminant birlik tiplari bilan useReducer ni, maxsus huklarda Generics larni va React.PropsWithChildren orqali children ni qattiq tekshirishni tiplash imkonini beradi. TypeScript bilan funksional komponentlar qo'shimcha abstraksiyalarsiz to'liq tip xavfsizligini beradi.