عرض مصدر React/hooks custom

<noinclude>{{DISPLAYTITLE:بناء خطافات خاصة بك في React}}</noinclude>
''الخطافات هي إضافة جديدة إلى الإصدار 16.8 في React، إذ تسمح لك باستعمال ميزة الحالة وميزات React الأخرى دون كتابة أي صنف.''

بناء خطافات خاصة بك تمكِّنك من استخراج شيفرة من مكون ما إلى دوال قابلة لإعادة الاستعمال.

عندما تعلمنا كيفية استعمال [[React/hooks effect|خطاف التأثير]]، رأينا المكون الآتي من تطبيق محادثة يعرض رسالة تشير إلى حالة اتصال صديق أي إن كان متصلًا أم غير متصل:<syntaxhighlight lang="javascript">
import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
</syntaxhighlight>الآن، لنقل أنَّ تطبيق الدردشة هذا يملك قائمة اتصال (contact list)، وأردنا تصيير أسماء المستخدمين المتصلين بلون أخضر. يمكننا نسخ ولصق شيفرة مشابهة إلى المكون <code>FriendListItem</code> ولكن لن يكون ذلك جيدًا من الناحية المثالية:<syntaxhighlight lang="javascript">
import React, { useState, useEffect } from 'react';

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
</syntaxhighlight>عوضًا عن ذلك، نريد أن نشارك هذه الشيفرة بين <code>FriendStatus</code> و <code>FriendListItem</code>.

تقليديًّا في [[React]]، يمكننا مشاركة شيفرة ذات حالة بين المكونات عبر طريقتين مشهورتين هما: [[React/render props|خاصيَّات التصيير]]، و<nowiki/>[[React/higher order components|المكونات ذات الترتيب الأعلى]]. سنتعلَّم الآن كيف يمكن للخطافات أن تحل العديد من هذه المشكلات الشبيهة دون إجبارك على إضافة المزيد من المكونات إلى الشجرة.

== استخراج خطاف مخصص ==
عندما نريد مشاركة شيفرة بين دالتين من دوال [[JavaScript]]، نستخرج هذه الشيفرة إلى دالة ثالثة. ولمَّا كانت المكونات والخطافات هي دوال، فهذا ينطبق عليها أيضًا.

الخطاف المخصص هو دالة [[JavaScript|JavaScript]] يبدأ اسمها بالكلمة <code>use</code> وقد تستدعي خطافات أخرى ضمنها. على سبيل المثال، الدالة <code>useFriendStatus</code> في الشيفرة التالية هي أول خطاف مخصص ننشئه:<syntaxhighlight lang="javascript">
import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}
</syntaxhighlight>لا يوجد أي شيء جديد في هذه الشيفرة، إذ نُسِخَ معظمها من مكونات الشيفرة السابقة. بشكل مشابه لمكون، احرص على استدعاء الخطافات الأخرى في أعلى مستوى في الخطاف المخصص، دون وضعها ضمن عبارات شرطية مثلًا.

وبشكل مخالف لمكونات [[React]]، لا يحتاج الخطاف المخصص إلى توقيع محدَّد. يمكننا تحديد الوسائط التي سيأخذها والقيم التي سيعيدها (إن وجدت). بعبارة أخرى، الخطافات المخصصة تشبه أية دالة عادية باستثناء أنَّ اسمها يجب أن يبدأ بالكلمة <code>use</code> دومًا، لذا يمكنك من خلال النظر إلى الشيفرة معرفة إن كانت [[React/hooks rules|قواعد الخطافات]] تنطبق عليها بشكل صحيح أم لا.

الغرض من الخطاف <code>useFriendStatus</code> هو الاشتراك في حالة صديق، وهذا هو سبب تمرير <code>friendID</code> وسيطًا له وإعادة حالة اتصال ذلك الصديق منه (فيما إذا كان متصلًا أم غير متصل):<syntaxhighlight lang="javascript">
function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  return isOnline;
}
</syntaxhighlight>الآن، دعنا نرى كيف يمكننا استعمال هذا الخطاف المخصص.

== استعمال خطاف مخصص ==
في البداية، كان هدفنا الواضح هو إزالة الشيفرة المكررة من المكونين <code>FriendStatus</code> و <code>FriendListItem</code> لأنَّ كلاهما يريد معرفة حالة اتصال صديق.

الآن وبعد أن استخرجنا هذه الشيفرة إلى الخطاف <code>useFriendStatus</code>، يمكننا استعماله ببساطة بالشكل التالي:<syntaxhighlight lang="javascript">
function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
</syntaxhighlight><syntaxhighlight lang="javascript">
function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
</syntaxhighlight>'''هل تكافئ هذه الشيفرة الأمثلة الأصلية؟'''

نعم، تكافئها وتعمل بالطريقة نفسها. إن أمعنت النظر، فستلاحظ أنَّنا لم نجرِ أية تغييرات متعلقة بالسلوك. فكل ما فعلنا هو استخراج الشيفرة المتشابهة بين دالتين إلى دالة منفصلة. الخطافات المخصَّصة هي عُرفٌ يتَّبِع تصميم الخطافات نفسها وليس ذلك من ميزات [[React]].

'''هل يتوجَّب عليَّ استعمال السابقة <code>use</code> عند تسمية الخطافات المخصصة؟'''

ليس ذلك إجباريًا، وإنما اختياري، لكن من الضروري فعل ذلك لجعلها أسهل لبقية المطورين. هذا العرف مهم جدًا، إذ لن نتمكن بدونه من التحقق من تطبيق [[React/hooks rules|قواعد الخطافات]] تلقائيًّا لأنَّه لا يمكننا التفريق بين الدوال التي تحوي استدعاءات لخطافات داخلها وتلك التي لا تحوي عليها.

'''هل يتشارك مكونان اثنان يستعملان نفس الخطاف الحالة؟'''

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

'''كيف يحصل خطاف مخصَّص على حالة معزولة؟'''

يحصل كل خطاف عند استدعائه على حالة معزولة. ولمَّا كنا استدعينا الخطاف <code>useFriendStatus</code> مباشرةً، فإن المكون من وجهة نظر [[React]] يستدعي <code>useState</code> و <code>useEffect</code> فقط. وكما تعلمنا سابقًا، يمكننا استدعاء <code>[[React/hooks state|useState]]</code> و <code>[[React/hooks effect|useEffect]]</code> عدَّة مرات في مكون واحد، وسيكون كل منها مستقلًا كليًّا.

=== تمرير معلومات بين الخطافات ===
لمَّا كانت الخطافات دوالًا، يمكننا تمرير معلومات بينها.

لتوضيح ذلك عمليًّا، سنستعمل مكونًا آخر من مثال تطبيق الدردشة الافتراضي. الشيفرة التالية هي منتقي مستلم رسالة الدردشة والتي تظهر فيما إذا كان الصديق المحدَّد حاليًا متصلًا:<syntaxhighlight lang="javascript">
const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
];

function ChatRecipientPicker() {
  const [recipientID, setRecipientID] = useState(1);
  const isRecipientOnline = useFriendStatus(recipientID);

  return (
    <>
      <Circle color={isRecipientOnline ? 'green' : 'red'} />
      <select
        value={recipientID}
        onChange={e => setRecipientID(Number(e.target.value))}
      >
        {friendList.map(friend => (
          <option key={friend.id} value={friend.id}>
            {friend.name}
          </option>
        ))}
      </select>
    </>
  );
}
</syntaxhighlight>نُبقِي معرِّف الصديق المختار حاليًا في متغير الحالة <code>recipientID</code>، ونحدِّثه إن اختار المستخدم صديقًا آخر من المنتقي <code>[[HTML/select|<select>]]</code>.

لمَّا كان استدعاء الخطاف <code>[[React/hooks state|useState]]</code> يعطينا القيمة الأحدث لمتغير الحالة <code>recipientID</code>، فيمكننا تمريرها إلى خطافنا المخصَّص <code>useFriendStatus</code> كوسيط بالشكل التالي:<syntaxhighlight lang="javascript">
  const [recipientID, setRecipientID] = useState(1);
  const isRecipientOnline = useFriendStatus(recipientID);
</syntaxhighlight>هذا يمكِّننا من معرفة إذا كان الصديق المحدَّد حاليًا متصلًا أم لا. إن اخترنا صديقًا آخر وحدَّثنا متغير الحالة <code>recipientID</code>، فسيلغي الخطاف <code>useFriendStatus</code> الاشتراك من الصديق المحدَّد سابقًا، ويشترك في حالة الصديق الذي جرى تحديده للتو.

== استعمل مخيلتك! ==
توفر الخطافات المخصَّصة مرونةً لتشارك الشيفرة لم تكن متوافرة مع مكونات [[React]] من قبل. تستطيع أن تكتب خطافات مخصَّصة تغطي مجالًا واسعًا من حالات الاستعمال مثل المعالجة (handling)، والتحريك، والاشتراكات التصريحية (declarative subscriptions)، والمؤقتات، وغيرها الكثير من الأمور التي لم نتطرق لها. أضف إلى ذلك أنَّه يمكنك بناء خطافات يمكن استعمالها بسهولة كما يمكن استعمال ميزات [[React]] الضمنية.

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

على سبيل المثال، ربما تملك مكونًا معقدًا يحوي الكثير من الحالات المحلية التي تدار بطريقة مخصصة. ولكن الخطاف <code>[[React/hooks state|useState]]</code> لا يجعل مركزية تحديث الشيفرة أسهل، لذا قد تفضِّل كتابتها عل شكل مخفِّض (reducer) باستعمال المكتبة [https://redux.js.org/ Redux]:<syntaxhighlight lang="javascript">
function todosReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, {
        text: action.text,
        completed: false
      }];
    // ... other actions ...
    default:
      return state;
  }
}
</syntaxhighlight>المخفضات مناسبة جدًا للاختبار في بيئة منعزلة، ويمكنها أن تعبِّر عن شيفرة معقدة للتحديث. يمكنك أيضًا تقسيمها إلى أجزاء تمثِّل مخفضات أصغر إن كان ذلك ضروريًا. على أي حال، قد تجد في فوائد استعمال حالة [[React]] المحلية (أي React local state) أمرًا ممتعًا، أو قد لا ترغب في تثبيت مكتبة أخرى.

إذًا، ماذا لو استطعنا كتابة الخطاف <code>useReducer</code> بشكل يمكِّننا من إدارة الحالة المحلية للمكون الخاص بنا مع مخفِّض؟ نسخةٌ مبسَّطةٌ من ذلك قد تبدو بالشكل:<syntaxhighlight lang="javascript">
function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}
</syntaxhighlight>يمكننا الآن استعماله في مكوِّننا لنترك المخفض (reducer) يتولى مهمة إدارة حالته:<syntaxhighlight lang="javascript">
function Todos() {
  const [todos, dispatch] = useReducer(todosReducer, []);

  function handleAddClick(text) {
    dispatch({ type: 'add', text });
  }

  // ...
}
</syntaxhighlight>الحاجة لإدارة حالة محلية مع مخفِّض في مكون معقد هو أمرٌ شائعٌ، لذا بنينا الخطاف <code>useReducer</code> ضمنيًا في [[React]]. ستجد هذا الخطاف مع بقية الخطافات المضمَّنة الأخرى في قسم "[[React/hooks reference|مرجع إلى الواجهة البرمجية للخطافات]]".

== انظر أيضًا==
*[[React/hooks intro|مدخل إلى الخطافات]]
*[[React/hooks overview|لمحة خاطفة عن الخطافات]]
*[[React/hooks state|استعمال خطاف الحالة]]
*[[React/hooks effect|استعمال خطاف التأثير]]
*[[React/hooks rules|قواعد استعمال الخطافات]]
*[[React/hooks reference|مرجع إلى الواجهة البرمجية للخطافات]]
*[[React/hooks faq|الأسئلة الشائعة حول الخطافات]]

== مصادر ==
* [https://reactjs.org/docs/hooks-custom.html صفحة بناء خطافات خاصة بك في توثيق React الرسمي.]
[[تصنيف:React]]
[[تصنيف:React Hooks]]