أهم مصطلحات React للمطورين

المصطلحات المستخدمة في React

مقدمة

تُعد React مكتبة JavaScript مفتوحة المصدر، تم تطويرها بواسطة فريق الفيسبوك، لتسهيل بناء واجهات المستخدم التفاعلية. تتميز React بتقنية البرمجة الموجهة للمكونات (Component-Based Architecture) التي تتيح تقسيم واجهات المستخدم إلى مكونات مستقلة، يمكن تطويرها واختبارها بشكل منفصل. وبالرغم من سهولة استخدامها في البداية، إلا أن React تحمل مجموعة من المصطلحات والتقنيات التي قد تكون معقدة للمطورين الجدد. في هذا المقال، سنتناول أهم المصطلحات المستخدمة في React، ونشرح كل منها بشكل مفصل.

1. المكونات (Components)

المكونات هي العناصر الأساسية في React التي تشكل واجهات المستخدم. كل مكون يمكن أن يحتوي على دالة أو صف دراسي (Class) يقوم بتحديد طريقة العرض والتفاعل مع البيانات. تنقسم المكونات في React إلى نوعين أساسيين:

• المكونات الوظيفية (Functional Components): هي مكونات مكتوبة كدوال JavaScript بسيطة. بدأت React بالاعتماد عليها بشكل أساسي بعد إضافة خاصية الـ Hooks في النسخ الحديثة.

• المكونات الصنفية (Class Components): كانت الطريقة التقليدية لكتابة المكونات في React، حيث يتم استخدام الصفوف (Classes) والدوال (Methods) التي تحتوي على الحالة (State) والإجراءات (Lifecycle methods). ومع مرور الوقت، أصبحت المكونات الوظيفية أكثر شهرة بفضل الـ Hooks.

مثال:

javascript
CopyEdit
function HelloWorld() {
  return <h1>Hello, world!h1>;
}

2. الحالة (State)

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

في المكونات الوظيفية، تُستخدم الدالة useState لإدارة الحالة:

javascript
CopyEdit
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} timesp>
      <button onClick={() => setCount(count + 1)}>Click mebutton>
    div>
  );
}

3. الخصائص (Props)

الخصائص (أو “Props”) هي الآلية التي من خلالها يمكن للمكونات أن تتبادل البيانات مع بعضها البعض. يمكن تشبيهها بالوسائط (arguments) في الدوال. يتم إرسال الـ props من المكون الأب إلى المكونات الأبناء، ولا يمكن تعديلها في المكونات الأبناء.

مثال:

javascript
CopyEdit
function Welcome(props) {
  return <h1>Hello, {props.name}h1>;
}

function App() {
  return <Welcome name="Sara" />;
}

في المثال أعلاه، يتم تمرير الخاصية name من مكون App إلى مكون Welcome، حيث يتم عرض قيمة الخاصية في النص.

4. الـ Hooks

الـ Hooks هي دوال مدمجة في React تسمح للمكونات الوظيفية باستخدام الخصائص المتقدمة مثل الحالة و الـ lifecycle methods. تم تقديم الـ Hooks لأول مرة في النسخة 16.8، وتهدف إلى تسهيل إدارة الحالة والتحكم في دورة حياة المكونات في المكونات الوظيفية.

أنواع الـ Hooks:

• useState: لإدارة الحالة.

• useEffect: للتعامل مع التأثيرات الجانبية (مثل جلب البيانات).

• useContext: للوصول إلى البيانات من الـ Context API.

• useRef: للوصول إلى عناصر DOM أو حفظ قيم بين عمليات إعادة العرض.

مثال على استخدام useEffect:

javascript
CopyEdit
import React, { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? <pre>{JSON.stringify(data, null, 2)}pre> : "Loading..."}div>;
}

5. الـ Virtual DOM

الـ Virtual DOM هو مفهوم في React يسمح بإجراء التحديثات على الواجهة بشكل أسرع وأكثر كفاءة. يتم استخدامه لإنشاء نسخة “مؤقتة” من DOM الحقيقي في الذاكرة، وعندما يتم تغيير الحالة أو الخصائص، يقوم React بمقارنة الـ Virtual DOM بالـ DOM الحقيقي، ومن ثم تحديث العناصر المتأثرة فقط.

يؤدي ذلك إلى تقليل العمليات المكلفة في DOM الفعلي، مما يحسن من أداء التطبيقات.

6. الـ Lifecycle Methods

الـ Lifecycle methods هي مجموعة من الدوال التي يتم استدعاؤها في مراحل مختلفة من دورة حياة المكون الصفي (Class Component). تشمل هذه المراحل مثل التحميل، التحديث، والتدمير. وتساعد هذه الدوال المطورين في إدارة الأمور مثل جلب البيانات أو تنظيف الموارد.

أشهر الـ Lifecycle Methods:

• componentDidMount: يتم استدعاؤه بعد تحميل المكون في الـ DOM.

• shouldComponentUpdate: يقرر ما إذا كان يجب إعادة عرض المكون.

• componentWillUnmount: يتم استدعاؤه قبل إزالة المكون من الـ DOM.

مثال:

javascript
CopyEdit
class Timer extends React.Component {
  componentDidMount() {
    console.log('Timer component mounted');
  }

  componentWillUnmount() {
    console.log('Timer component will unmount');
  }

  render() {
    return <div>Timerdiv>;
  }
}

7. الـ Context API

الـ Context API هي طريقة لإدارة البيانات التي تحتاج إلى أن تكون متاحة عبر العديد من المكونات في شجرة المكونات دون الحاجة إلى تمريرها كـ props عبر كل مكون. يعد الـ Context مفيدًا في حالة وجود بيانات مثل الإعدادات العامة أو حالة المستخدم يجب أن تكون متاحة في العديد من المكونات في التطبيق.

مثال على استخدام الـ Context:

javascript
CopyEdit
import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    ThemeContext.Provider>
  );
}

8. الـ Refs

الـ Refs هي طريقة للوصول إلى العناصر DOM أو مكونات React بشكل مباشر. يتم استخدامها عندما تحتاج إلى إجراء تعديلات مباشرة على العناصر أو عندما تريد الحفاظ على مرجع لعناصر DOM في المكونات الوظيفية.

مثال على استخدام useRef:

javascript
CopyEdit
import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus the inputbutton>
    div>
  );
}

9. الـ Fragment

الـ Fragment هو عنصر غير مرئي لا يحتوي على تمثيل في الـ DOM. يُستخدم لتجميع عدة عناصر دون إضافة عقد جديدة إلى شجرة الـ DOM. وهو مفيد في حالة الحاجة إلى تضمين أكثر من عنصر في دالة return من مكون دون استخدام عنصر إضافي مثل

javascript
CopyEdit
function App() {
  return (
    <>
      <h1>Welcomeh1>
      <p>This is a React Fragment examplep>
    
  );
}

javascript
CopyEdit
const element = <h1>Hello, world!h1>;

javascript
CopyEdit
const element = React.createElement('h1', null, 'Hello, world!');

javascript
CopyEdit
function withCounter(Component) {
  return function WrappedComponent(props) {
    const [count, setCount] = useState(0);
    return <Component {...props} count={count} setCount={setCount} />;
  };
}