Kāpēc ir svarīgi sadalīt kodu komponentēs?

Koda sadalīšana komponentēs uzlabo pārrakstāmību, uzturēšanu un testējamību lietotnē.

Pārrakstāmība

Izveidojot neatkarīgas komponentes, tās var izmantot dažādās lietotnes daļās vai pat citos projektos. Tas ietaupa laiku un samazina kļūdu iespējamību.

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

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

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

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

// RegisterForm.js - arī izmanto Button
import Button from './button';

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

  return (
    <form>
      {/* forma */}
      <Button onClick={handleRegister} label="Reģistrēties" />
    </form>
  );
};

Uzturēšana

Komponentu sadalīšana padara kodu organizētāku un vieglāk lasāmu. Izmaiņas vienā komponentē mazāk ietekmēs citas lietotnes daļas. Tas atvieglo atkļūdošanu un jaunu funkciju ieviešanu.

// Header.js
const Header = () => {
  // loģika un galvenes izkārtojums
};

// Footer.js
const Footer = () => {
  // loģika un kājenes izkārtojums
};

// App.js - galvenā lapa
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* galvenais lapas saturs */}
      <Footer />
    </div>
  );
};

Izmaiņas tikai Header.js neietekmēs Footer.js vai App.js (ja vien Header interfeiss nemainās).

Testējamība

Katru komponenti var testēt izolēti, kas atvieglo testu rakstīšanu un palielina to drošību.

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

test('notiek klikšķa notikumi', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Poga" />);
  fireEvent.click(getByText('Poga'));
  expect(handleClick).toHaveBeenCalledTimes(1); // Pārbauda, vai notikums tika izsaukts
});

Citas priekšrocības

• Uzlabota koda lasāmība: Mazāki koda bloki ir vieglāk uztverami.
• ** Paralēla izstrāde:** Dažādi izstrādātāji var strādāt ar dažādām komponentēm vienlaikus.
• Sarežģītības pārvaldība: Sarežģīta lietotne tiek sadalīta pārvaldāmās daļās.

Priekšrocība	Apraksts
Pārrakstāmība	Komponentu izmantošana dažādās vietās.
Uzturēšana	Vieglāk veikt izmaiņas un labot kļūdas.
Testējamība	Iespēja testēt izolēti.
Lasāmība	Kods kļūst saprotamāks.
Pārvaldība	Samazina lietotnes sarežģītību.

Komponentu sadalīšana ir mūsdienu front-end ietvaru un bibliotēku, piemēram, React, Vue un Angular, galvenais princips.