Чаро муҳим аст, ки кодро ба компонентҳо тақсим кунем?

Тақсимоти коди ба компонентҳо баланд бардоштани истифодабарӣ, дорамадорӣ ва санҷишпазирӣ дар барнома.

Истифодабарӣ

Бо эҷоди компонентҳои мустақил, онҳо метавонанд дар қисмҳои гуногуни барнома ё ҳатто дар дигар лоиҳаҳо истифода шаванд. Ин вақтро сарфа мекунад ва эҳтимолияти хатоҳоро кам мекунад.

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

// LoginForm.js - истифодаи Button
import Button from './button';

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

  return (
    <form>
      {/* форма */}
      <Button onClick={handleSubmit} label="Воридшавӣ" />
    </form>
  );
};

// RegisterForm.js - низ истифодаи Button
import Button from './button';

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

  return (
    <form>
      {/* форма */}
      <Button onClick={handleRegister} label="Бақайдгирӣ" />
    </form>
  );
};

Дорамадорӣ

Тақсимот ба компонентҳо коди барномаро муташаккил ва хонданӣ мекунад. Тағйирот дар як компонент камтар ба дигар қисмҳо таъсир мерасонад. Ин осонтар кардани хатоёбӣ ва илова кардани функсияҳои навро таъмин мекунад.

// Header.js
const Header = () => {
  // логика ва тарҳрезии сарлавҳа
};

// Footer.js
const Footer = () => {
  // логика ва тарҳрезии поён
};

// App.js - саҳифаи асосӣ
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* мундариҷаи асосии саҳифа */}
      <Footer />
    </div>
  );
};

Тавре ки танҳо дар Header.js тағйирот ворид кардан, ба Footer.js ё App.js таъсир намерасонад (агар интерфейси Header тағйир наёбад).

Санҷишпазирӣ

Ҳар як компонент метавонад ба таври мустақил санҷиш шавад, ки навиштани санҷишҳоро осонтар ва эътимоднокии онҳоро баланд мекунад.

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

test('коркарди ҳодисаҳои клик', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Тугма" />);
  fireEvent.click(getByText('Тугма'));
  expect(handleClick).toHaveBeenCalledTimes(1); // Санҷиш, ки ҳодиса даъват шудааст
});

Манфиатҳои дигар

• Беҳтар шудани хонданӣ: Блокҳои хурдтар осонтар фаҳмида мешаванд.
• Рушди ҳамзамон: Тими таҳиягарон метавонанд дар компонентҳои гуногун ҳамзамон кор кунанд.
• Идоракунии мураккабӣ: Барномаҳои мураккаб ба қисмҳои идорашаванда тақсим мешаванд.

Манфиат	Тавсиф
Истифодабарӣ	Истифодаи компонентҳо дар ҷойҳои гуногун.
Дорамадорӣ	Осонтар кардани тағйирот ва хатоҳо.
Санҷишпазирӣ	Имконияти санҷиши мустақил.
Хонданӣ	Код бештар фаҳмо мешавад.
Идоракунӣ	Кам кардани мураккабии барнома.

Тақсимоти код ба компонентҳо принсипи асосии фреймворкҳо ва китобхонаҳои пешрафтаи фронтенд, ба монанди React, Vue ва Angular мебошад.