تنفيذ التفاعل في تطبيق React: التعديل والترشيح والتصيير الشرطي

يعد React أحد أكثر مكتبات جافاسكريبت شيوعاً في بناء واجهات المستخدم التفاعلية، حيث يوفر نظامًا مرنًا وفعالًا لإدارة الحالة وعرض المحتوى بشكل ديناميكي. من أساسيات بناء تطبيقات React الناجحة فهم كيفية تنفيذ التفاعل من خلال التعديل (Update)، والترشيح (Filtering)، والتصيير الشرطي (Conditional Rendering). في هذا المقال الموسع، سوف نتناول بالتفصيل كيفية التعامل مع هذه المفاهيم وتطبيقها عمليًا في بيئة React مع التركيز على بناء تطبيقات قابلة للتفاعل وقابلة للصيانة.

1. مقدمة عن التفاعل في React

التفاعل هو جوهر تجربة المستخدم في أي تطبيق ويب حديث. في React، يتم تحقيق التفاعل عبر تغيرات الحالة (state) وإعادة تصيير المكونات (re-rendering) بناءً على هذه التغيرات. التفاعل قد يشمل أمورًا مثل تعديل بيانات قائمة، ترشيح العناصر المعروضة بناءً على شروط معينة، وأيضًا التحكم في ما يتم عرضه للمستخدم من خلال التصيير الشرطي.

تُعد الإدارة الفعالة لهذه العمليات من أهم المهارات التي يجب على مطوري React اكتسابها، إذ تسمح بتوفير تجربة مستخدم سلسة وغنية دون الحاجة إلى إعادة تحميل الصفحة أو استدعاء معقد للخادم.

2. التعديل (Update) في React

التعديل هو عملية تحديث البيانات أو الحالة التي تعتمد عليها واجهة المستخدم. في React، تتم عملية التعديل عادةً من خلال استخدام الحالة الداخلية للمكون (state) أو عبر تحديث خصائص (props) المكونات.

2.1 استخدام الـ useState لتحديث الحالة

في مكونات React الحديثة التي تستخدم الواجهات الوظيفية (Functional Components)، يُعد hook useState الأداة الأساسية لإدارة الحالة وتعديلها.

مثال عملي على تعديل قائمة مهام (ToDo List):

jsx
CopyEdit
import React, { useState } from "react";

function TodoApp() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "تعلم React", completed: false },
    { id: 2, text: "بناء تطبيق عملي", completed: false },
  ]);

  const toggleComplete = (id) => {
    setTasks((prevTasks) =>
      prevTasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div>
      <h2>قائمة المهامh2>
      <ul>
        {tasks.map((task) => (
          <li
            key={task.id}
            onClick={() => toggleComplete(task.id)}
            style={{
              textDecoration: task.completed ? "line-through" : "none",
              cursor: "pointer",
            }}
          >
            {task.text}
          li>
        ))}
      ul>
    div>
  );
}

export default TodoApp;

في هذا المثال، عند النقر على مهمة معينة، يتم تعديل خاصية completed الخاصة بها، مما يغير طريقة عرضها عبر استخدام تصيير شرطى لتطبيق خط على النص.

3. الترشيح (Filtering) في React

الترشيح هو عملية اختيار وعرض جزء من البيانات بناءً على شرط معين. غالبًا ما يُستخدم الترشيح لتمكين المستخدمين من البحث أو تصنيف البيانات.

3.1 ترشيح العناصر بناءً على إدخال المستخدم

لنفترض أننا نريد ترشيح قائمة المهام لعرض المهام التي تحتوي على نص معين فقط.

jsx
CopyEdit
import React, { useState } from "react";

function FilterableTodoApp() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "تعلم React", completed: false },
    { id: 2, text: "بناء تطبيق عملي", completed: false },
    { id: 3, text: "قراءة مقالات تقنية", completed: false },
  ]);
  const [searchTerm, setSearchTerm] = useState("");

  const filteredTasks = tasks.filter((task) =>
    task.text.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <h2>قائمة المهام مع الترشيحh2>
      <input
        type="text"
        placeholder="ابحث في المهام..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredTasks.map((task) => (
          <li key={task.id}>{task.text}li>
        ))}
      ul>
    div>
  );
}

export default FilterableTodoApp;

في هذا المثال، تُستخدم حالة searchTerm لالتقاط نص البحث، ويتم تطبيق دالة filter على قائمة المهام لعرض المهام التي تحتوي على نص البحث.

4. التصيير الشرطي (Conditional Rendering)

التصيير الشرطي هو عرض أو إخفاء أجزاء من واجهة المستخدم بناءً على شروط معينة. هذه الطريقة تحسن من تجربة المستخدم من خلال إظهار المحتوى المناسب فقط.

4.1 تقنيات التصيير الشرطي في React

يوجد عدة أساليب في React لتنفيذ التصيير الشرطي:

• استخدام تعبيرات if داخل دالة المكون:

jsx
CopyEdit
function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>مرحبًا بك مجددًا!h1>;
  } else {
    return <h1>يرجى تسجيل الدخول.h1>;
  }
}

• التصوير باستخدام المشغل الثلاثي (Ternary operator):

jsx
CopyEdit
function Greeting({ isLoggedIn }) {
  return (
    <h1>{isLoggedIn ? "مرحبًا بك مجددًا!" : "يرجى تسجيل الدخول."}h1>
  );
}

• التصوير باستخدام &&:

jsx
CopyEdit
function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>صندوق البريدh1>
      {unreadMessages.length > 0 && (
        <h2>لديك {unreadMessages.length} رسائل غير مقروءةh2>
      )}
    div>
  );
}

4.2 مثال عملي على التصيير الشرطي في قائمة مهام

نضيف زرًا يمكن المستخدم من إظهار أو إخفاء المهام المكتملة:

jsx
CopyEdit
import React, { useState } from "react";

function TodoAppWithConditional() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "تعلم React", completed: false },
    { id: 2, text: "بناء تطبيق عملي", completed: true },
  ]);
  const [showCompleted, setShowCompleted] = useState(true);

  const filteredTasks = tasks.filter(
    (task) => showCompleted || !task.completed
  );

  return (
    <div>
      <h2>قائمة المهام مع التصيير الشرطيh2>
      <button onClick={() => setShowCompleted(!showCompleted)}>
        {showCompleted ? "إخفاء المهام المكتملة" : "إظهار المهام المكتملة"}
      button>
      <ul>
        {filteredTasks.map((task) => (
          <li
            key={task.id}
            style={{
              textDecoration: task.completed ? "line-through" : "none",
            }}
          >
            {task.text}
          li>
        ))}
      ul>
    div>
  );
}

export default TodoAppWithConditional;

في هذا المثال، نستخدم حالة showCompleted للتحكم في ما إذا كانت المهام المكتملة ستعرض أم لا، وتُطبق فلترة ضمنية مع التصيير الشرطي للمهام المعروضة.

5. دمج التعديل والترشيح والتصيير الشرطي في تطبيق واحد

لتحقيق تفاعل متكامل في التطبيقات، من الضروري الدمج بين التعديل، الترشيح، والتصيير الشرطي. يتم ذلك عبر إدارة الحالة بشكل دقيق وربطها بواجهة المستخدم.

5.1 تطبيق متكامل لقائمة مهام مع تعديل، ترشيح وتصوير شرطي

jsx
CopyEdit
import React, { useState } from "react";

function AdvancedTodoApp() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "تعلم React", completed: false },
    { id: 2, text: "بناء تطبيق عملي", completed: true },
    { id: 3, text: "قراءة مقالات تقنية", completed: false },
  ]);
  const [searchTerm, setSearchTerm] = useState("");
  const [showCompleted, setShowCompleted] = useState(true);

  const toggleComplete = (id) => {
    setTasks((prevTasks) =>
      prevTasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const filteredTasks = tasks.filter(
    (task) =>
      task.text.toLowerCase().includes(searchTerm.toLowerCase()) &&
      (showCompleted || !task.completed)
  );

  return (
    <div>
      <h2>تطبيق قائمة مهام متكاملh2>
      <input
        type="text"
        placeholder="ابحث في المهام..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <button onClick={() => setShowCompleted(!showCompleted)}>
        {showCompleted ? "إخفاء المهام المكتملة" : "إظهار المهام المكتملة"}
      button>
      <ul>
        {filteredTasks.length > 0 ? (
          filteredTasks.map((task) => (
            <li
              key={task.id}
              onClick={() => toggleComplete(task.id)}
              style={{
                textDecoration: task.completed ? "line-through" : "none",
                cursor: "pointer",
              }}
            >
              {task.text}
            li>
          ))
        ) : (
          <li>لا توجد مهام تطابق المعايير.li>
        )}
      ul>
    div>
  );
}

export default AdvancedTodoApp;

في هذا المثال، ندمج تحديث حالة المهام (عبر النقر على المهمة لتغيير حالتها)، الترشيح عبر مربع البحث، والتصيير الشرطي لإظهار أو إخفاء المهام المكتملة، مع عرض رسالة في حال عدم وجود مهام مطابقة.

6. أفضل الممارسات في التعديل والترشيح والتصيير الشرطي

6.1 تجنب تحديث الحالة بشكل مباشر

يجب دومًا تحديث الحالة باستخدام الدوال المخصصة مثل setState أو hooks مثل setTasks لضمان إعادة التصيير بشكل صحيح، وتجنب التلاعب المباشر بالمصفوفات أو الكائنات.

6.2 تحسين الأداء باستخدام memoization

عند العمل مع ترشيح بيانات كبيرة، يمكن استخدام useMemo لتحسين الأداء ومنع عمليات الترشيح غير الضرورية.

jsx
CopyEdit
import React, { useState, useMemo } from "react";

const filteredTasks = useMemo(() => {
  return tasks.filter(
    (task) =>
      task.text.toLowerCase().includes(searchTerm.toLowerCase()) &&
      (showCompleted || !task.completed)
  );
}, [tasks, searchTerm, showCompleted]);

6.3 فصل المكونات وتنظيم الكود

يفضل تقسيم واجهة المستخدم إلى مكونات صغيرة وواضحة، لكل منها مسؤولية محددة مثل مكون إدخال البحث، مكون عرض قائمة المهام، وهكذا، مما يسهل الصيانة والاختبار.

7. الجداول التوضيحية

فيما يلي جدول يوضح مقارنة بين طرق التصيير الشرطي المختلفة في React:

8. الخاتمة

يعد التفاعل في React نواة بناء واجهات المستخدم الحديثة، ومن خلال التمكن من التعديل، الترشيح، والتصيير الشرطي يمكن تحقيق تطبيقات فعالة، ديناميكية، وسهلة الاستخدام. يقدم React آليات واضحة ومرنة تسمح للمطور بالتحكم الكامل في حالة التطبيق ومحتواه المعروض.

التمكن من استخدام useState وuseMemo إلى جانب الممارسات الصحيحة في تحديث الحالة وتنظيم المكونات، يساعد على بناء تطبيقات قابلة للتطوير والصيانة، وتوفر تجربة مستخدم متميزة. إن فهم كيفية الدمج بين هذه المفاهيم الأساسية هو خطوة لا غنى عنها لكل مطور يسعى لإنشاء تطبيقات تفاعلية وذات جودة عالية في بيئة React.

المصادر والمراجع

• React Documentation – State and Lifecycle: https://reactjs.org/docs/state-and-lifecycle.html

• React Documentation – Conditional Rendering: https://reactjs.org/docs/conditional-rendering.html