Kodėl svarbu kodą suskirstyti į komponentus?

Kodo suskirstymas į komponentus didina pernaudojamumą, palaikomumą ir testuojamumą programoje.

Pernaudojamumas

Sukurdami nepriklausomus komponentus, juos galima naudoti skirtingose programos dalyse arba net kituose projektuose. Tai taupo laiką ir mažina klaidų tikimybę.

// button.js
const Button = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

// LoginForm.js - naudoja Button
import Button from './button';

const LoginForm = () => {
  const handleSubmit = () => {
    // ...
  };

  return (
    <form>
      {/* forma */}
      <Button onClick={handleSubmit} label="Prisijungti" />
    </form>
  );
};

// RegisterForm.js - taip pat naudoja Button
import Button from './button';

const RegisterForm = () => {
  const handleRegister = () => {
    // ...
  };

  return (
    <form>
      {/* forma */}
      <Button onClick={handleRegister} label="Registruotis" />
    </form>
  );
};

Palaikomumas

Komponentų suskirstymas daro kodą geriau organizuotą ir lengviau skaitomą. Pakeitimai viename komponente mažiau veikia kitus programos dalis. Tai palengvina klaidų paiešką ir naujų funkcijų pridėjimą.

// Header.js
const Header = () => {
  // logika ir antraštės išdėstymas
};

// Footer.js
const Footer = () => {
  // logika ir poraštės išdėstymas
};

// App.js - pagrindinis puslapis
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* pagrindinis puslapio turinys */}
      <Footer />
    </div>
  );
};

Pakeitus tik Header.js, tai nepaveiks Footer.js ar App.js (jei Header sąsaja nesikeičia).

Testavimas

Kiekvienas komponentas gali būti testuojamas izoliuotai, tai palengvina testų rašymą ir didina jų patikimumą.

// button.test.js
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('apdoroja paspaudimo įvykius', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Mygtukas" />);
  fireEvent.click(getByText('Mygtukas'));
  expect(handleClick).toHaveBeenCalledTimes(1); // patikrinimas, ar įvykis buvo iškviestas
});

Kitos privalumai

• Kodo skaitomumas pagerėjo: Maži blokai lengviau suprantami.
• Lygiagretus kūrimas: Skirtingi kūrėjai gali dirbti su skirtingais komponentais vienu metu.
• Sudėtingumo valdymas: Sudėtinga programa suskirstoma į valdomas dalis.

Privalumas	Aprašymas
Pernaudojamumas	Komponentų naudojimas skirtingose vietose.
Palaikomumas	Lengviau įvesti pakeitimus ir taisyti klaidas.
Testuojamumas	Galimybė testuoti izoliuotai.
Skaitymas	Kodas tampa aiškesnis.
Valdymas	Programos sudėtingumo mažinimas.

Komponentų suskirstymas yra šiuolaikinių frontend karkasų ir bibliotekų, tokių kaip React, Vue ir Angular, pagrindinis principas.