ستمنحك هذه المقالة فهمًا متعمقًا لـ 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
  }
  يعود (
    <>
      
      ركز على الإدخال
    
  )
}

ينشئ الكود أعلاه كائن 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} ثانية.
      

      ابدأ
      إيقاف مؤقت