Funkcionális komponensek a React-ben — a modern fejlesztési szabvány

Mi az a Functional Component?

Functional Component (funkcionális komponens) — egy React-komponens, ami függvényként van definiálva, fogad egy props objektumot és visszaad egy React-elemet. A React 16.8 előtt az ilyen komponenseket stateless (állapot nélküli) néven illették, mert nem tudták kezelni a belső állapotot.

A hookok megjelenésével a React 16.8-ban (2019. február) a funkcionális komponensek hozzáférést kaptak az állapothoz (useState), mellékhatásokhoz (useEffect), kontextushoz (useContext) és referenciákhoz (useRef). A „stateless" kifejezés elavult — a modern funkcionális komponensek teljes mértékben kezelik az állapotot.

A React hivatalosan a funkcionális komponenseket ajánlja elsődleges módként a komponensek létrehozására. A react.dev webhelyen található összes dokumentáció, példa, oktatóanyag és új API (Server Components, Actions) a funkcionális megközelítésre épül. Az osztály alapú komponenseket nem távolították el, de a React új képességei csak hookokon keresztül érhetők el.

Funkcionális komponens létrehozása

A legegyszerűbb funkcionális komponens — egy függvény, ami JSX-et ad vissza. Props-ot argumentumként fogad, nem igényel konstruktort, super hívást vagy this kötést. A props közvetlenül elérhető a függvény argumentumán keresztül — nincs 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>
);

Komponens állapottal

Állapot hozzáadásához használja a useState-et. A hook egy két értékből álló tuple-t ad vissza: az aktuális állapotot és egy setter függvényt. Az osztályok this.setState-jával ellentétben a useState teljesen lecseréli az értéket, nem fésüli össze az előzővel.

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

Hookok a funkcionális komponensekben

A hookok a modern React alapját képezik. Minden hook egy adott feladatot old meg: useState — állapot, useEffect — mellékhatások, useContext — hozzáférés a kontextushoz, useRef — referenciák DOM-elemekhez, useCallback és useMemo — memóizáció.

useEffect mellékhatásokhoz

A useEffect egyszerre helyettesíti a componentDidMount, componentDidUpdate és componentWillUnmount metódusokat. Az első argumentum — egy callback a hatással, a második — a függőségek tömbje. Ha a tömb üres, a hatás egyszer fut le a csatlakoztatás után. Ha függőségek meg vannak adva — mindegyik megváltozásakor.

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

Egyedi hookok

A funkcionális komponensek fő előnye — a logika újrafelhasználása egyedi hookokon keresztül. Ha egy osztály alapú komponensben a logika megduplázódott a componentDidMount és a componentDidUpdate között, addig a funkcionálisban egy külön függvénybe kerül ki extractionra, use előtaggal. Az egyedi hookok a HOC és a render props fő alternatívái.

Kompozíció az öröklődés helyett

A React kompozíciót ajánl az öröklődés helyett a kód komponensek közötti újrafelhasználására. A funkcionális komponensek ideálisak a kompozícióhoz: egy komponens több másikat is tartalmazhat, props-okat és children-t adva át nekik.

A children minta — amikor a komponens gyermekelemeket fogad a children prop-on keresztül — természetesen implementálódik: function Layout({ children }). A Vue slots analógja névvel ellátott props-komponenseken keresztül valósul meg: function Page({ header, sidebar, content }).

Az öröklődés a React-ben gyakorlatilag nem használt. Még az osztály alapú komponensek is, amelyek technikailag támogatják az extends-t, ritkán alkotnak egynél mélyebb hierarchiákat. A funkcionális komponensek kompozícióval teljes mértékben lefedik a kód újrafelhasználásának igényeit öröklődés nélkül.

Teljesítmény optimalizálása

A funkcionális komponensek beépített optimalizációs mechanizmusokkal rendelkeznek. React.memo — a PureComponent megfelelője függvényekhez: megakadályozza az újrarenderelést, ha a props nem változott (felületes összehasonlítás). useMemo gyorsítótárazza a számítások eredményét a renderelések között.

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 memóizálja a callback függvényeket, hogy ne jöjjenek létre újra minden rendereléskor. Ez kritikus, amikor függvényeket adunk át React.memo-ba csomagolt gyermekkomponenseknek: useCallback nélkül a gyermekkomponens minden alkalommal újrarenderelődik, mert a függvényre mutató referencia megváltozik.

Funkcionális és osztály alapú komponensek összehasonlítása

A megközelítések közötti különbség túlmutat a szintaxison. Funkcionális komponensek — ez egy closure: az állapot és a hatások egy adott rendereléshez kötődnek. Osztály alapú komponensek — ez a this: az állapot mindig a this.state-ből származik, ami elavult lehet az aszinkron callback végrehajtásának pillanatában.

A funkcionális komponensek lineáris végrehajtási folyamatot biztosítanak. Egy osztály alapú komponensben a kapcsolódó logika gyakran több életciklus-metódus között van szétszórva. Például a WebSocket-feliratkozás a componentDidMount-ban van beállítva és a componentWillUnmount-ban eltávolítva. Egy funkcionális komponensben mindkét művelet — egy useEffect-ben egy tisztító függvénnyel.

TypeScript és funkcionális komponensek

A TypeScript természetesebben működik a funkcionális komponensekkel, mint az osztályokkal. A props típusosítása — egy interfész a függvény argumentumához. A visszaadott érték típusa — JSX.Element vagy ReactNode. A useState automatikusan kikövetkezteti a típust a kezdeti értékből.

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

A modern TypeScript lehetővé teszi a useReducer típusosítását diszkriminált unió típusokkal, a Generics használatát egyedi hookokban és a children szigorú ellenőrzését a React.PropsWithChildren-en keresztül. A funkcionális komponensek TypeScript-tel teljes típusbiztonságot nyújtanak további absztrakciók nélkül.