احصل على أقصى استفادة من خطافات التفاعل مع أفضل الممارسات هذه

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

تعلم كل شيء عن أساسيات React Hooks واكتشف بعض أفضل الممارسات لاستخدامها في تطبيقات React.

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

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

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

متى يجب استخدام خطافات React؟

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

إنشاء خطافات مخصصة لمكالمات API.

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

أفضل الممارسات مع خطافات التفاعل

الآن بعد أن عرفت ماهية خطافات React ومتى يتم استخدامها ، دعنا نتحدث عن بعض أفضل الممارسات.

1. فقط استدعاء الخطافات من وظائف التفاعل

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

هذا لأنه يمكنك فقط استدعاء React Hook من دالة React. وظائف React هي مكونات تعلنها باستخدام كلمة مفتاحية للدالة.

فيما يلي مثال على مكون دالة React:

يستورد رد فعل ، {useState} من 'تتفاعل'؛
وظيفةبرنامج() {
مقدار ثابت [count، setCount] = useState (0);
يعود (
<شعبة>
<ص>{عدد}</ ص>
<زر onClick = {() => setCount (عدد + 1)}>
 انقر فوق لي
</button>
</div>
 );
}

وإليك مثال على مكون فئة:

يستورد رد فعل ، {مكون} من 'تتفاعل'؛
فصلبرنامجيمتدعنصر{
 الدولة = {
 العد: 0
 };
يجعل() {
يعود (
<شعبة>
<ص>{this.state.count}</ ص>
<زر onClick = {() => this.setState ({count: this.state.count + 1})}>
 انقر فوق لي
</button>
</div>
 );
 }
}

يوضح المثال الأول مكون التطبيق باستخدام الكلمة الأساسية للوظيفة ، بينما يستخدم الثاني الكلمة الأساسية للفئة.

2. استخدم خطافًا واحدًا للاستخدام

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

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

يستورد React ، {useState ، useEffect} من 'تتفاعل'؛
وظيفةبرنامج() {
مقدار ثابت [count، setCount] = useState (0);
useEffect (() => {
 console.log ('سيتم تشغيل هذا كلما تم عرض مكون التطبيق!');
 }, []);
useEffect (() => {
 console.log ('سيتم تشغيل هذا أيضًا كلما تم عرض مكون التطبيق!');
 }, []);
يعود (
<شعبة>
<ص>{عدد}</ ص>
<زر onClick = {() => setCount (عدد + 1)}>
 انقر فوق لي
</button>
</div>
 );
}

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

يستورد React ، {useState ، useEffect} من 'تتفاعل'؛
وظيفةبرنامج() {
مقدار ثابت [count، setCount] = useState (0);
useEffect (() => {
 console.log ('سيتم تشغيل هذا كلما تم عرض مكون التطبيق!');
 console.log ('سيتم تشغيل هذا أيضًا كلما تم عرض مكون التطبيق!');
 }, []);
يعود (
<شعبة>
<ص>{عدد}</ ص>
<زر onClick = {() => setCount (عدد + 1)}>
 انقر فوق لي
</button>
</div>
 );
}

هذا يعني أنه يمكنك فقط استدعاء React Hooks من المثال الأول. إذا حاولت استدعاء React Hooks من المثال الثاني ، فستتلقى خطأ.

3. استخدم الخطافات في المستوى الأعلى

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

يستورد رد فعل ، {useState} من 'تتفاعل'؛
وظيفةبرنامج() {
ل (يترك أنا = 0; أنا < 10; أنا ++) {
// لا تفعل هذا!
مقدار ثابت [count، setCount] = useState (0);
 }
يعود (
<شعبة>
<ص>{عدد}</ ص>
<زر onClick = {() => setCount (عدد + 1)}>
 انقر فوق لي
</button>
</div>
 );
}

في المثال أعلاه ، سيعرض مكون التطبيق فقط العدد والزر من التكرار النهائي للحلقة. هذا لأن React تُحدِّث فقط متغير الحالة من التكرار الأخير.

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

يستورد رد فعل ، {useState} من 'تتفاعل'؛
وظيفةبرنامج() {
// هذه هي الطريقة الصحيحة لاستخدام useState داخل حلقة
مقدار ثابت [count، setCount] = useState (0);
ل (يترك أنا = 0; أنا < 10; أنا ++) {
// ...
 }
يعود (
<شعبة>
<ص>{عدد}</ ص>
<زر onClick = {() => setCount (عدد + 1)}>
 انقر فوق لي
</button>
</div>
 );
}

4. لا تفرط في استخدام الخطافات

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

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

أضف المزيد من الوظائف باستخدام خطاف React 18

مع إصدار React 18 ، تتوفر أدوات ربط جديدة. كل خطاف خاص بميزة React معينة. يمكنك العثور على قائمة بجميع الروابط المتاحة على موقع React. لكن الخطافات الأكثر استخدامًا لا تزال useState و useEffect.