تقسیم‌بندی به کامپوننت‌های مجزا

مقدمه

اپلیکیشن مدیریت کارهای ما اکنون از نظر عملکردی کامل است. اما با افزودن تمام قابلیت‌ها، کامپوننت TodoApp ما بسیار بزرگ و پیچیده شده است. این کامپوننت در حال حاضر مسئولیت‌های زیادی دارد: مدیریت state کلی، رندر کردن فرم، و رندر کردن لیست وظایف. این نقض «اصل تک-مسئولیتی» (Single Responsibility Principle) است و نگهداری و توسعه آینده کد را دشوار می‌کند.

در این درس پایانی، ما با بازسازی (refactoring) کد و تقسیم آن به کامپوننت‌های کوچک‌تر و متمرکزتر، معماری اپلیکیشن خود را بهبود خواهیم داد.

استخراج کامپوننت TodoList

اولین قدم، استخراج منطق مربوط به نمایش لیست وظایف به یک کامپوننت جداگانه به نام TodoList است.

JAVASCRIPT (React)

function TodoList({ todos, toggleTodo, deleteTodo }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          toggleTodo={toggleTodo}
          deleteTodo={deleteTodo}
        />
      ))}
    </ul>
  );
}

این کامپوننت لیست todos و توابع handler را به عنوان props دریافت کرده و مسئولیت پیمایش روی لیست و رندر کردن کامپوننت TodoItem برای هر وظیفه را بر عهده دارد.

استخراج کامپوننت TodoItem

سپس، منطق مربوط به نمایش یک وظیفه واحد را به کامپوننت TodoItem منتقل می‌کنیم.

JAVASCRIPT (React)

function TodoItem({ todo, toggleTodo, deleteTodo }) {
  return (
    <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
      <span onClick={() => toggleTodo(todo.id)}>
        {todo.text}
      </span>
      <button onClick={() => deleteTodo(todo.id)}>Delete</button>
    </li>
  );
}

این کامپوننت تنها مسئولیت نمایش یک وظیفه و دکمه‌های مربوط به آن را دارد. این سطح از جداسازی، کد ما را بسیار تمیزتر و قابل فهم‌تر می‌کند.

کامپوننت والد نهایی

پس از این بازسازی، کامپوننت اصلی ما، TodoApp، بسیار ساده‌تر می‌شود. مسئولیت اصلی آن اکنون تنها مدیریت state و منطق کسب‌وکار (business logic) است.

JAVASCRIPT (React)

function TodoApp() {
  const [todos, setTodos] = useState([/* ... */]);
  
  // All handler functions (addTodo, toggleTodo, deleteTodo) remain here
  
  useEffect(() => {
    // ... localStorage logic ...
  }, [todos]);

  return (
    <div>
      <h1>Todo List</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
    </div>
  );
}

این ساختار جدید که به آن "Container and Presentational Components" نیز گفته می‌شود، یک الگوی بسیار رایج و مؤثر در React است. کامپوننت TodoApp به عنوان یک «کانتینر» عمل می‌کند که state را مدیریت می‌کند، در حالی که TodoList و TodoItem کامپوننت‌های «نمایشی» هستند که تنها مسئولیت نمایش UI را بر اساس props دریافتی بر عهده دارند.

در این درس، با بازسازی نهایی اپلیکیشن خود و تقسیم آن به کامپوننت‌های کوچک‌تر و متمرکزتر، پروژه پایانی این دوره را به اتمام رساندیم. این رویکرد ماژولار، سنگ بنای ساخت اپلیکیشن‌های React بزرگ، مقیاس‌پذیر و قابل نگهداری است.

تبریک می‌گویم! شما با موفقیت دوره آموزش React را به پایان رساندید. شما از مفاهیم اولیه تا هوک‌های پیشرفته و الگوهای مدیریت state را فرا گرفته و سه پروژه عملی و کامل را ساخته‌اید. شما اکنون دانش و مهارت لازم برای ساخت اپلیکیشن‌های وب مدرن و تعاملی با React را در اختیار دارید. موفق باشید!