Kodun komponentlərə bölünməsi niyə vacibdir?

Kodun komponentlərə bölünməsi tətbiqin yenidən istifadəsini, dəstəklenməsini və sınaqdan keçirilməsini artırır.

Yenidən istifadə

Müstəqil komponentlər yaradaraq, onları tətbiqin müxtəlif hissələrində və ya hətta digər layihələrdə istifadə etmək mümkündür. Bu, vaxtı qənaət edir və səhv ehtimalını azaldır.

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

// LoginForm.js - Button istifadə edir
import Button from './button';

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

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

// RegisterForm.js - də Button istifadə olunur
import Button from './button';

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

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

Dəstəklenmə

Komponentlərə bölmək kodu daha təşkilatlanmış və oxumaq asan edir. Bir komponentdə edilən dəyişikliklər digər hissələrə az təsir edir. Bu, səhvlərin tapılmasını və yeni funksiyaların əlavə edilməsini asanlaşdırır.

// Header.js
const Header = () => {
  // başlıq üçün məntiq və markup
};

// Footer.js
const Footer = () => {
  // altbilgi üçün məntiq və markup
};

// App.js - əsas səhifə
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* əsas məzmun */}
      <Footer />
    </div>
  );
};

Yalnız Header.js-də edilən dəyişikliklər Footer.js və ya App.js-yə təsir etməyəcək (əgər Header-in interfeysi dəyişməzsə).

Test ediləbilərlik

Hər bir komponent izolyasiya olunaraq test edilə bilər, bu da testlərin yazılmasını asanlaşdırır və onların etibarlılığını artırır.

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

test('klik hadisələrini idarə edir', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Düymə" />);
  fireEvent.click(getByText('Düymə'));
  expect(handleClick).toHaveBeenCalledTimes(1); // hadisənin çağırıldığını yoxlayır
});

Digər üstünlüklər

• Kodun oxunaqlığını yaxşılaşdırır: kiçik bloklar daha asan başa düşülür.
• Paralel inkişaf: müxtəlif inkişafçılar eyni zamanda müxtəlif komponentlər üzərində işləyə bilər.
• Mürəkkəbliyin idarə olunması: mürəkkəb tətbiqlər idarə olunan hissələrə bölünür.

Üstünlük	Təsviri
Yenidən istifadə	Komponentlərin müxtəlif yerlərdə istifadəsi.
Dəstəklenmə	Dəyişikliklərin və səhvlərin asanlıqla edilə bilməsi.
Test ediləbilərlik	İzolyasiya olunmuş test imkanları.
Oxunaqlıq	Kod daha anlaşılan olur.
İdarəetmə	Tətbiqin mürəkkəbliyini azaldır.

Komponentlərə bölünmə, React, Vue və Angular kimi müasir frontend çərçivələri və kitabxanalarının əsas prinsipidir.