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

كيفية البدء سريعًا باستخدام VUE3.0:

مقدمة

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

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

يتم ترجمة الخطافات على أنها وظائف ضمن مكونات الوظيفة المسؤولة عن الربط بالوظائف الخارجية.

توفر React بعض الخطافات الشائعة، وتدعم React أيضًا الخطافات المخصصة. تُستخدم هذه الخطافات لإدخال وظائف خارجية إلى الوظائف.

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

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

لماذا

نستخدم الخطافات هناك سببان رئيسيان لاستخدام الخطافات:

• لتبسيط إعادة استخدام المنطق؛
• لتسهيل فهم المكونات المعقدة.

1. تبسيط إعادة استخدام المنطق.

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

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

2. تسهيل فهم المكونات المعقدة

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

4. الخطافات شائعة الاستخدام

1. useState

useState هو خطاف يسمح لك بإضافة حالة في مكونات دالة React.

أمثلة الاستخدام هي كما يلي:

import React, { useState } from 'react';

مثال الدالة () {
  // قم بتعريف متغير الحالة المسمى "count" const [count, setCount] = useState(0);
  // ...

يعلن الكود أعلاه عن عدد متغير الحالة بقيمة أولية 0، ويقوم بتحديث العدد الحالي عن طريق استدعاء setCount.

2. useEffect

useEffect يسمح لك بتنفيذ عمليات التأثير الجانبي في مكونات الوظيفة.

تشير التأثيرات الجانبية إلى جزء من التعليمات البرمجية لا علاقة له بنتائج التنفيذ الحالية. تتضمن عمليات التأثيرات الجانبية الشائعة الحصول على البيانات وإعداد الاشتراكات وتغيير DOM يدويًا في مكونات React.

يمكن أن يتلقى useEffect معلمتين، ويكون الكود كما يلي:

useEffect(callback, Dedeency)

المعلمة الأولى هي رد اتصال الوظيفة المراد تنفيذها، والمعلمة الثانية هي تبعيات مصفوفة التبعيات الاختيارية.

التبعية اختيارية إذا لم يتم تحديدها، فسيتم تنفيذ رد الاتصال في كل مرة يتم فيها تنفيذ مكون الوظيفة؛ إذا تم تحديدها، فسيتم تنفيذها فقط عندما تتغير القيمة في التبعية.

أمثلة الاستخدام هي كما يلي:

function example() {
  const [count, setCount] = useState(0);

  // مشابه للمكون DidMount والمكون DidUpdate:
  استخدام التأثير (() => {
    // قم بتحديث عنوان المستند باستخدام واجهة برمجة تطبيقات المتصفح
    document.title = `لقد نقرت على ${count} مرة`;

    العودة () => {
        // يمكن استخدامه للمسح، وهو ما يعادل مكون WillUnmount الخاص بمكون الفئة
    }

  }, [count]); // حدد التبعية كعدد، وقم بتنفيذ التأثير الجانبي عند تحديث العدد // ...

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

بالإضافة إلى ذلك، يوفر useEffect أربعة توقيتات لتنفيذ التأثيرات الجانبية:

• يتم تنفيذها بعد كل تصيير : لا يتم توفير معلمة التبعية الثانية. على سبيل المثال، useEffect(() => {});
• يتم تنفيذه فقط بعد العرض الأول : توفير مصفوفة فارغة كتبعية. على سبيل المثال، useEffect(() => {}, []);
• يتم تنفيذه لأول مرة وبعد تغيير التبعيات : يوفر مصفوفة من التبعيات. على سبيل المثال، useEffect(() => {}, [deps]);
• الذي يتم تنفيذه بعد إلغاء تحميل المكون : يُرجع دالة رد اتصال. على سبيل المثال useEffect() => { return () => {} }, []).

3. useCallback

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

أمثلة الاستخدام هي كما يلي:

const memoizedCallback = useCallback(() => {
  افعل شيئًا (أ، ب)
}, [a, b])

سيعيد الكود أعلاه تعريف وظيفة رد الاتصال فقط عندما تتغير التبعيات a وb.

4. useMemo

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

أمثلة الاستخدام هي كما يلي:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

سيتم إعادة حساب الكود أعلاه فقط عند تغيير التبعيات a وb.

5. useRef

useRef يُرجع كائن ref، والذي يستمر طوال دورة حياة المكون.

له استخدامان:

• حفظ المراجع إلى عقد DOM ،
• ومشاركة البيانات بين العروض المتعددة .

مثال على كيفية حفظ عقدة DOM كما يلي:

function TextInputWithFocusButton() {
  const inputEl = useRef(خالية)
  ثابت onButtonClick = () => {
    يشير // `current` إلى عنصر إدخال النص inputEl.current.focus() الذي تم تثبيته على DOM
  }
  يعود (
    <>
      <input ref={inputEl} type='text' />
      <button onClick={onButtonClick}>ركز على الإدخال</button>
    </>
  )
}

ينشئ الكود أعلاه كائن ref من خلال useRef، ويحفظ مرجع عقدة DOM، ويمكنه تنفيذ عمليات DOM على ref.current.

فيما يلي مثال على مشاركة البيانات بين عمليات عرض متعددة:

import React, { useState, useCallback, useRef } from 'react'

تصدير الوظيفة الافتراضية Timer() {
  // تحديد حالة الوقت لحفظ الوقت المتراكم للتوقيت const [time, setTime] = useState(0)

  // تعريف المؤقت، يتم استخدام هذه الحاوية لحفظ متغير بين العروض عبر المكونات const timer = useRef(null)

  // وظيفة معالج الأحداث لبدء التوقيت const HandleStart = useCallback(() => {
    // استخدم السمة الحالية لتعيين قيمة المرجع timer.current = window.setInterval(() => {
      setTime((الوقت) => الوقت + 1)
    }، 100)
  }، [])

  // الإيقاف المؤقت لوظيفة معالجة حدث التوقيت const HandlePause = useCallback(() => {
    // استخدم ClearInterval لإيقاف التوقيت window.clearInterval(timer.current)
    timer.current = null
  }، [])

  يعود (
    <ديف>
      {الوقت / 10} ثانية.
      <br />
      <button onClick={handleStart}>ابدأ</button>
      <button onClick={handlePause}>إيقاف مؤقت</button>
    </div>
  )
}

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

6. useContext

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

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

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

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

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

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

7. useReducer

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

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

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

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

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

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

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

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

• يبدأ الاسم بكلمة "use"؛
• وتستدعي الوظيفة الخطافات الأخرى داخليًا.

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

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 رسميًا مكتبة استخدام التفاعل، والتي تضم عددًا كبيرًا من الخطافات المخصصة التي يمكن استخدامها مباشرةً، مما يساعدنا على تبسيط المنطق الداخلي للمكونات وتحسين إمكانية قراءة التعليمات البرمجية وقابلية صيانتها.

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

• useLocation وuseSearchParam: تتبع حالة موضع شريط التنقل بالصفحة؛
• useScroll: تتبع موضع التمرير لعنصر HTML؛
• useScrolling: تتبع ما إذا كان عنصر HTML يتم تمريره،
• useAsync، وuseAsyncFn، و useAsyncRetry: تحليل وظيفة غير متزامنة؛
• useTitle: قم بتعيين عنوان الصفحة.

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

6. ملخص

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

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