الصفحة الرئيسية>دروس تصميم الويب>دروس جافا سكريبت

ستمنحك هذه المقالة فهمًا متعمقًا لـ React Hooks!

الكاتب:Eve Cole وقت التحديث:2022-08-26 17:15:48
) }

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

6. useContext

يتم استخدام useContext لتلقي كائن سياق وإرجاع قيمة السياق، مما يمكنه تحقيق مشاركة البيانات عبر المستويات.

المثال كما يلي:

// إنشاء كائن سياق const MyContext = React.createContext(initialValue)
وظيفة التطبيق () {
  يعود (
    // قم بتمرير قيمة السياق من خلال context.Provider 
      <الحاوية />
    
  )
}

حاوية الوظيفة () {
  العودة <اختبار />
}

اختبار الوظيفة () {
  // احصل على قيمة السياق const theme = useContext(MyContext) // 1
  العودة 
}

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

7. useReducer

يستخدم useReducer لتقديم وظيفة المخفض.

المثال كما يلي:

const [state, send] = useReducer(reducer, virtualState)

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

5. خطافات مخصصة

من خلال الخطافات المخصصة، يمكن استخراج منطق المكون إلى وظائف قابلة لإعادة الاستخدام.

1. كيفية إنشاء خطافات مخصصة؟

الخطافات المخصصة هي وظائف تتميز بخاصيتين تميزها عن الوظائف العادية:

المثال كالتالي:

import { useState, useCallback } from 'react'

وظيفة استخدام العداد () {
  // تحديد العدد، يتم استخدام هذه الحالة لحفظ القيمة الحالية const [count, setCount] = useState(0)
  // تنفيذ عملية إضافة 1 const increment = useCallback(() => setCount(count + 1), [count])
  // تنفيذ عملية التخفيض بمقدار 1 const decrement = useCallback(() => setCount(count - 1), [count])
  // إعادة تعيين العداد constset = useCallback(() => setCount(0), [])

  // تصدير عمليات منطق الأعمال ليستخدمها المتصل return { count, increment, decrement,set }
}

// المكون 1
الدالة ميكومبونينت1() {
  const { العد، الزيادة، النقصان، إعادة التعيين } = useCounter()
}

// المكون 2
الدالة MyComponent2() {
  const { العد، الزيادة، النقصان، إعادة التعيين } = useCounter()
}

الكود أعلاه يعيد استخدام منطق الأعمال بسهولة بين مكون MyComponent1 ومكون MyComponent2 عن طريق تخصيص الخطافات useCounter.

2. مكتبة الخطافات المخصصة - استخدام التفاعل

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

من بينها، خطافاتنا المخصصة شائعة الاستخدام هي:

يمكنك الانتقال إلى الموقع الرسمي لـ React-Use لمعرفة كيفية استخدامه.

6. ملخص

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

آمل أن يساعدك، شكرا للقراءة ~