Functional component sa React — modernong pamantayan ng pag-develop

Ano ang Functional Component?

Functional Component (functional component) — ay isang React component na tinukoy bilang isang function, tumatanggap ng props object at nagbabalik ng React element. Bago ang React 16.8, ang mga ganitong component ay tinatawag na stateless (walang estado), dahil hindi sila makakapamahala ng internal state.

Sa pagdating ng mga hook sa React 16.8 (Pebrero 2019), ang mga functional component ay nakakuha ng access sa state (useState), side effects (useEffect), context (useContext), at refs (useRef). Ang terminong „stateless" ay luma na — ang modernong functional component ay ganap na namamahala ng state.

Opisyal na inirerekomenda ng React ang mga functional component bilang pangunahing paraan ng paggawa ng component. Lahat ng dokumentasyon sa react.dev, mga halimbawa, tutorial, at bagong API (Server Components, Actions) ay binuo sa functional na diskarte. Ang mga class component ay hindi inalis, ngunit ang mga bagong kakayahan ng React ay magagamit lamang sa pamamagitan ng hooks.

Paglikha ng functional component

Ang pinakasimpleng functional component — function na nagbabalik ng JSX. Tumatanggap ito ng props bilang argumento, hindi nangangailangan ng constructor, super call, o this binding. Ang props ay magagamit nang direkta sa pamamagitan ng argumento ng function — walang this.props.

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

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

Component na may state

Para magdagdag ng state, gamitin ang useState. Ang hook ay nagbabalik ng tuple ng dalawang value: kasalukuyang state at setter function. Hindi tulad ng class na this.setState, pinapalitan ng useState ang value nang buo, hindi ito pinagsasama sa nauna.

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

Mga Hook sa functional component

Ang mga hook ay pundasyon ng modernong React. Bawat hook ay lumulutas ng tiyak na gawain: useState — state, useEffect — side effects, useContext — access sa context, useRef — mga reference sa DOM element, useCallback at useMemo — memoization.

useEffect para sa side effects

Ang useEffect ay sabay na pinapalitan ang componentDidMount, componentDidUpdate, at componentWillUnmount. Unang argumento — callback na may epekto, pangalawa — array ng dependencies. Kung ang array ay walang laman, ang epekto ay isinasagawa nang isang beses pagkatapos ng mounting. Kung ang dependencies ay tinukoy — sa bawat pagbabago ng alinman sa mga ito.

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

Custom na mga hook

Ang pangunahing bentahe ng functional component — paggamit muli ng lohika sa pamamagitan ng custom na mga hook. Kung sa class component ang lohika ay nadoble sa pagitan ng componentDidMount at componentDidUpdate, sa functional component ito ay inilalabas sa hiwalay na function na may prefix na use. Ang custom na mga hook ay pangunahing alternatibo sa HOC at render props.

Komposisyon sa halip ng pagmamana

Inirerekomenda ng React ang komposisyon, hindi pagmamana, para sa paggamit muli ng code sa pagitan ng mga component. Ang mga functional component ay perpekto para sa komposisyon: isang component ay maaaring maglaman ng maraming iba pa, na nagpapasa ng props at children sa kanila.

Ang pattern na children — kapag ang component ay tumatanggap ng mga child element sa pamamagitan ng prop children — ay natural na naipapatupad: function Layout({ children }). Ang analog ng slots mula sa Vue ay naipapatupad sa pamamagitan ng pinangalanang props-component: function Page({ header, sidebar, content }).

Ang pagmamana sa React ay halos hindi ginagamit. Kahit ang mga class component, na teknikal na sumusuporta sa extends, bihirang bumuo ng mga hierarchy na mas malalim sa isang antas. Ang mga functional component na may komposisyon ay ganap na sumasaklaw sa mga pangangailangan ng paggamit muli ng code nang walang pagmamana.

Pag-optimize ng pagganap

Ang mga functional component ay may built-in na mekanismo ng pag-optimize. React.memo — analog ng PureComponent para sa mga function: pinipigilan ang muling pag-render kung ang props ay hindi nagbago (mababaw na paghahambing). useMemo ay nag-cache ng resulta ng mga kalkulasyon sa pagitan ng mga render.

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 ay nagme-memoize ng mga callback function upang hindi sila muling likhain sa bawat render. Ito ay kritikal kapag nagpapasa ng mga function sa mga child component na nakabalot sa React.memo: walang useCallback, ang child component ay magre-render sa bawat pagkakataon, dahil ang reference sa function ay nagbabago.

Paghahambing ng functional at class component

Ang pagkakaiba sa pagitan ng mga diskarte ay lampas sa syntax. Functional component — ay closure: ang state at effects ay nakatali sa isang partikular na render. Class component — ay this: ang state ay palaging kinukuha mula sa this.state, na maaaring luma na sa oras ng pag-execute ng asynchronous callback.

Ang mga functional component ay nagbibigay ng linear na daloy ng pag-execute. Sa class component, ang kaugnay na lohika ay madalas na nakakalat sa ilang lifecycle method. Halimbawa, ang subscription sa WebSocket ay naka-set up sa componentDidMount at inaalis sa componentWillUnmount. Sa functional component, ang parehong operasyon — sa isang useEffect na may function ng paglilinis.

TypeScript at functional component

Ang TypeScript ay mas natural na gumagana sa mga functional component kaysa sa mga class. Pag-type ng props — interface para sa argumento ng function. Uri ng ibinabalik na value — JSX.Element o 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>
  );

Ang modernong TypeScript ay nagpapahintulot sa pag-type ng useReducer na may discriminated union types, Generics sa custom na mga hook, at mahigpit na pagsusuri ng children sa pamamagitan ng React.PropsWithChildren. Ang mga functional component na may TypeScript ay nagbibigay ng buong kaligtasan ng uri nang walang karagdagang abstraksyon.