الشروع في العمل مع واجهة برمجة تطبيقات خطافات React

عندما تم إصدار React 16.8 رسميًا في أوائل فبراير 2019 ، تم شحنها مع واجهة برمجة تطبيقات إضافية تتيح لك استخدام الحالة والميزات الأخرى في React دون كتابة فصل دراسي. يُطلق على واجهة برمجة التطبيقات الإضافية هذه اسم Hooks وقد أصبحت شائعة في نظام React البيئي ، من المشاريع مفتوحة المصدر إلى استخدامها في تطبيقات الإنتاج.

React Hooks قابلة للاشتراك تمامًا مما يعني أن إعادة كتابة التعليمات البرمجية الحالية غير ضرورية ، ولا تحتوي على أي تغييرات متقطعة ، وهي متاحة للاستخدام مع إصدار React 16.8. كان بعض المطورين الفضوليين يستخدمون Hooks API حتى قبل إصدارها رسميًا ، ولكن في ذلك الوقت لم تكن مستقرة وكانت مجرد ميزة تجريبية. الآن هو مستقر ويوصى به لمطوري React لاستخدامه.

ملاحظة : لن نتحدث عن React أو JavaScript بشكل عام. ستكون المعرفة الجيدة بـ ReactJS و JavaScript مفيدة أثناء عملك في هذا البرنامج التعليمي.

ما هي خطافات React؟

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

• إعادة استخدام رمز محسّن ؛
• تكوين كود أفضل ؛
• أفضل التخلف عن السداد
• مشاركة المنطق غير المرئي باستخدام خطافات مخصصة ؛
• المرونة في التحرك لأعلى ولأسفل لشجرة components .

باستخدام React Hooks ، يتمتع المطورون بالقدرة على استخدام المكونات الوظيفية لكل ما يحتاجون إليه تقريبًا من مجرد عرض واجهة المستخدم إلى التعامل مع الحالة والمنطق أيضًا - وهو أمر رائع جدًا.

الدافع وراء إطلاق خطاف التفاعل

وفقًا لوثائق ReactJS الرسمية ، فيما يلي الدافع وراء إصدار خطافات React:

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

قواعد هوكس

هناك قاعدتان رئيسيتان يجب الالتزام بهما بشكل صارم كما هو مذكور من قبل فريق React الأساسي حيث تم تحديدهما في وثائق اقتراح الخطافات.

• تأكد من عدم استخدام الخطافات داخل الحلقات أو الشروط أو الوظائف المتداخلة ؛
• استخدم الخطافات من داخل وظائف التفاعل فقط.

خطافات التفاعل الأساسية

هناك 10 خطافات مدمجة تم شحنها مع React 16.8 ولكن الخطافات الأساسية (شائعة الاستخدام) تشمل:

• useState()
• useEffect()
• useContext()
• useReducer()

هذه هي الروابط الأساسية الأربعة التي يشيع استخدامها من قبل مطوري React الذين تبنوا خطافات React في قواعدهم البرمجية.

useState()

يسمح الخطاف useState() بتحديث الحالة داخل المكونات الوظيفية ومعالجتها ومعالجتها دون الحاجة إلى تحويلها إلى مكون فئة. دعنا نستخدم مقتطف الشفرة أدناه وهو مكون بسيط لعداد العمر وسنستخدمه لشرح قوة وتركيب الخطاف useState() .

 function App() { const [age, setAge] = useState(19); const handleClick = () => setAge(age + 1) return <div> I am {age} Years Old <div> <button onClick={handleClick}>Increase my age! </button> </div> </div> }

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

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

هذه هي الطريقة التي يجب أن يبدو عليها المكون عند تقديمه في تطبيق React الخاص بنا. بالنقر فوق الزر "زيادة عمري" ، ستتغير حالة العمر وسيعمل المكون تمامًا مثل مكون الفصل مع الحالة.

useEffect()

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

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

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

غالبًا ما يتم استخدام خطاف useEffect() للتأثيرات الجانبية التي تُستخدم عادةً للتفاعل مع Browser / DOM API أو جلب البيانات أو الاشتراكات الخارجية الشبيهة بواجهة برمجة التطبيقات. أيضًا ، إذا كنت على دراية بكيفية عمل طرق دورة حياة React ، يمكنك أيضًا التفكير في useEffect() باعتباره تركيبًا للمكون ، وتحديثًا ، وإلغاء التثبيت - كل ذلك مدمج في وظيفة واحدة. يتيح لنا تكرار طرق دورة الحياة في المكونات الوظيفية.

سنستخدم مقتطفات التعليمات البرمجية أدناه لشرح الطريقة الأساسية التي يمكننا استخدامها باستخدام useEffect() .

الخطوة 1: حدد حالة طلبك

 import React, {useState} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

تمامًا كما ناقشنا في القسم السابق حول كيفية استخدام useState() للتعامل مع الحالة داخل المكونات الوظيفية ، استخدمناها في مقتطف الشفرة الخاص بنا لتعيين حالة تطبيقنا الذي يعرض اسمي بالكامل.

الخطوة 2: استدعاء الخطاف useEffect

 import React, {useState, useEffect} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); //Call the use effect hook useEffect(() => { setName({FirstName: 'Shedrack', surname: 'Akintayo'}) }, [])//pass in an empty array as a second argument return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

لقد قمنا الآن باستيراد خطاف useEffect أيضًا من وظيفة useEffect() لتعيين حالة خاصية الاسم واللقب الخاصة بنا والتي تكون أنيقة وموجزة للغاية.

ربما لاحظت الخطاف useEffect في الوسيطة الثانية وهي عبارة عن مصفوفة فارغة ؛ هذا لأنه يحتوي على استدعاء setFullName الذي لا يحتوي على قائمة من التبعيات. سيؤدي تمرير الوسيطة الثانية إلى منع سلسلة لا نهائية من التحديثات ( componentDidUpdate() ) وسيسمح أيضًا useEffect() الخاص بنا بالعمل كطريقة دورة حياة componentDidMount وتقديمه مرة واحدة دون إعادة عرض على كل تغيير في الشجرة.

يجب أن يبدو تطبيق React الآن كما يلي:

يمكننا أيضًا استخدام تغيير خاصية title لتطبيقنا داخل وظيفة useEffect() عن طريق استدعاء وظيفة setTitle() ، مثل:

 import React, {useState, useEffect} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); //Call the use effect hook useEffect(() => { setName({firstName: 'Shedrack', surname: 'Akintayo'}) setTitle({'My Full Name'}) //Set Title }, [])// pass in an empty array as a second argument return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

الآن بعد تقديم تطبيقنا ، يعرض الآن العنوان الجديد.

useContext()

يقبل الخطاف useContext() كائن سياق ، أي القيمة التي يتم إرجاعها من React.createContext ، ثم يقوم بإرجاع قيمة السياق الحالية لهذا السياق.

يمنح هذا الخطاف المكونات الوظيفية وصولاً سهلاً إلى سياق تطبيق React الخاص بك. قبل تقديم الخطاف useContext ، ستحتاج إلى إعداد نوع contextType أو <Consumer> للوصول إلى حالتك العامة التي تنتقل من موفر في مكون فئة.

بشكل أساسي ، يعمل خطاف useContext مع React Context API ، وهي طريقة لمشاركة البيانات بعمق في جميع أنحاء تطبيقك دون الحاجة إلى تمرير عناصر التطبيق يدويًا عبر مستويات مختلفة. الآن ، يجعل useContext() استخدام السياق أسهل قليلاً.

ستوضح مقتطفات التعليمات البرمجية أدناه كيف تعمل واجهة برمجة تطبيقات السياق وكيف useContext Hook أفضل.

الطريقة العادية لاستخدام واجهة برمجة تطبيقات السياق

 import React from "react"; import ReactDOM from "react-dom"; const NumberContext = React.createContext(); function App() { return ( <NumberContext.Provider value={45}> <div> <Display /> </div> </NumberContext.Provider> ); } function Display() { return ( <NumberContext.Consumer> {value => <div>The answer to the question is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

دعنا الآن نقسم مقتطف الشفرة وشرح كل مفهوم.

أدناه ، نقوم بإنشاء سياق يسمى NumberContext . من المفترض إعادة كائن بقيمتين: { Provider, Consumer } .

 const NumberContext = React.createContext();

ثم نستخدم قيمة Provider التي تم إرجاعها من NumberContext الذي أنشأناه لإتاحة قيمة معينة لجميع الأطفال.

 function App() { return ( <NumberContext.Provider value={45}> <div> <Display /> </div> </NumberContext.Provider> ); }

باستخدام ذلك ، يمكننا استخدام قيمة Consumer التي تم إرجاعها من NumberContext الذي أنشأناه للحصول على القيمة التي وفرناها لجميع الأطفال. إذا كنت قد لاحظت ، فإن هذا المكون لم يحصل على أي دعائم.

 function Display() { return ( <NumberContext.Consumer> {value => <div>The answer to the question is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

لاحظ كيف تمكنا من الحصول على القيمة من مكون App في مكون Display من خلال تغليف المحتوى الخاص بنا في NumberContext.Consumer واستخدام طريقة العرض الخاصة لاسترداد القيمة وعرضها.

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

استخدام طريقة useContext

لشرح طريقة useContext ، سنعيد كتابة مكون Display باستخدام الخطاف useContext.

 // import useContext (or we could write React.useContext) import React, { useContext } from 'react'; // old code goes here function Display() { const value = useContext(NumberContext); return <div>The answer is {value}.</div>; }

هذا كل ما علينا فعله لعرض قيمتنا. أنيق جدا ، أليس كذلك؟ يمكنك استدعاء useContext() وتمريره في كائن السياق الذي أنشأناه ونحصل على القيمة منه.

ملاحظة: لا تنسَ أن الوسيطة التي تم تمريرها إلى الخطاف useContext يجب أن تكون كائن السياق نفسه وأي مكون يستدعي useContext سيعيد تقديمه دائمًا عندما تتغير قيمة السياق.

useReducer()

يستخدم خطاف useReducer للتعامل مع الحالات المعقدة والانتقالات في الحالة. يأخذ في وظيفة reducer وأيضًا مدخلات الحالة الأولية ؛ بعد ذلك ، تقوم بإرجاع الحالة الحالية وأيضًا دالة dispatch كإخراج عن طريق إتلاف الصفيف.

الكود أدناه هو الصيغة الصحيحة لاستخدام الخطاف useReducer .

 const [state, dispatch] = useReducer(reducer, initialArg, init);

إنه نوع من بديل لخطاف useState ؛ يُفضل عادةً useState عندما يكون لديك منطق حالة معقد يتعلق بقيم فرعية متعددة أو عندما تعتمد الحالة التالية على الحالة السابقة.

تتوفر خطاطيف تفاعل أخرى

خطافات تفاعل مخصصة

"الخطاف المخصص" هو وظيفة JavaScript تكون أسماؤها مسبوقة بكلمة use ويمكن استخدامها لاستدعاء الخطافات الأخرى. يتيح لك أيضًا استخراج منطق المكون إلى وظائف قابلة لإعادة الاستخدام ؛ إنها وظائف JavaScript عادية يمكنها الاستفادة من الخطافات الأخرى الموجودة بداخلها ، وتحتوي أيضًا على منطق ذي حالة مشترك يمكن استخدامه داخل مكونات متعددة.

توضح مقتطفات الشفرة أدناه مثالاً على خطاف React المخصص لتنفيذ التمرير اللانهائي (بواسطة باولو ليفي):

 import { useState } from "react"; export const useInfiniteScroll = (start = 30, pace = 10) => { const [limit, setLimit] = useState(start); window.onscroll = () => { if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ) { setLimit(limit + pace); } }; return limit; };

يقبل هذا الخطاف المخصص وسيطين هما start pace . وسيطة البداية هي العدد الأولي للعناصر التي سيتم عرضها بينما تكون وسيطة السرعة هي العدد اللاحق للعناصر التي سيتم عرضها. بشكل افتراضي ، يتم تعيين وسيطتي start pace على 30 و 10 على التوالي مما يعني أنه يمكنك بالفعل استدعاء الخطاف دون أي وسيطات وسيتم استخدام هذه القيم الافتراضية بدلاً من ذلك.

لذلك من أجل استخدام هذا الخطاف داخل تطبيق React ، سنستخدمه مع واجهة برمجة تطبيقات عبر الإنترنت تعرض بيانات "مزيفة":

 import React, { useState, useEffect } from "react"; import { useInfiniteScroll } from "./useInfiniteScroll"; const App = () => { let infiniteScroll = useInfiniteScroll(); const [tableContent, setTableContent] = useState([]); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/") .then(response => response.json()) .then(json => setTableContent(json)); }, []); return ( <div style={{ textAlign: "center" }}> <table> <thead> <tr> <th>User ID</th> <th>Title</th> </tr> </thead> <tbody> {tableContent.slice(0, infiniteScroll).map(content => { return ( <tr key={content.id}> <td style={{ paddingTop: "10px" }}>{content.userId}</td> <td style={{ paddingTop: "10px" }}>{content.title}</td> </tr> ); })} </tbody> </table> </div> ); }; export default App;

سيعرض الكود أعلاه قائمة بالبيانات المزيفة ( userID title ) التي تستخدم ربط التمرير اللانهائي لعرض العدد الأولي للبيانات على الشاشة.

خاتمة

أتمنى أن تكون قد استمتعت بالعمل من خلال هذا البرنامج التعليمي. يمكنك دائمًا قراءة المزيد عن React Hooks من المراجع أدناه.

إذا كانت لديك أي أسئلة ، فيمكنك تركها في قسم التعليقات وسيسعدني الإجابة على كل سؤال!

الريبو الداعم لهذه المقالة متاح على جيثب.

الموارد وقراءات أخرى

• "مرجع Hooks API" ، React.js Docs
• "ما هي رياكت هوكس؟" ، روبن ويروش
• "كيف يعمل خطاف useContext " ، ديف سيديا
• خطافات التفاعل: كيفية استخدام useEffect() ، حسين أحمدي ، متوسط
• "كتابة خطافات التفاعل المخصصة الخاصة بك" ، عيوش جيسوال ، متوسط
• "من السهل فهم وصفات خطاف التفاعل" ، غابي راجلاند ، useHooks ()