ما هو الخطاف؟ دعونا نتحدث عن خطافين شائعي الاستخدام في React

كيف تبدأ بسرعة مع VUE3.0: قبل أن تبدأ التعلم،

دعنا نقدم أولاً ما هو الخطاف.

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

لماذا يوصى باستخدام الخطافات للتطوير؟

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

ما ورد أعلاه هو ملخص شخصي مختصر لمزيد من الأسباب، يرجى الرجوع إلى موقع التفاعل الرسمي:

https://react.docschina.org/docs/hooks-intro. html#motivation

useState

في الكود:

React.useState(0) يعادل هذا في مكون الفئة. إضافة

متغير قيمة سمة إلى الحالة يعادل this.state في مكون الفئة.

يمكن استخدام قيمة المتغير setVariable لتعديل قيمة المتغير، والتي يمكن أن تكون مكافئة لـ this.setState في مكون الفئة،

قم باستيراد React، (useState) من 'react'.
تصدير الوظيفة الافتراضية useState_Demo() {
    const [variable, setVariable] = useState(0);// من خلال مهمة التدمير، نحصل على المتغير وsetVariable
    تغيير الدالة () {
        setVariable((variable) => متغير +1) // المعلمة التي تم تمريرها في رد الاتصال لـ setVariable متغيرة
    }
    يجعل (
        <ديف> 
            <button onclick = {change}>انقر فوقي لإنشاء المتغير+1</button>
        </div>
    )
}

useEffect

:

كما يتبين من الكود التالي، فإن استخدام useEffect يحل محل استخدام ComponentDidMoun وcomponentDidUpdate وcomponentWillUnmount في مكون الصنف

import React، (useState، useEffect) من 'react'

تصدير الوظيفة الافتراضية useState_Demo() {
   const [variable, setVariable] = useState(0);// من خلال مهمة التدمير، نحصل على المتغير وsetVariable
    
    استخدام التأثير (() => {
        // يتم استدعاء هذا الإرجاع عندما تتغير البيانات التي يراقبها المكون أو عند إلغاء تثبيته، يمكن أن يكون الاتصال به معادلاً لخطاف ComponentWillUnmount return () => {.
            console.log("تم إلغاء تثبيت المكون")
        }
    }, [متغير])// تم تمرير المعلمة الثانية [متغير]، مما يعني اكتشاف تغيير التحديث للمتغير بمجرد تغيير المتغير، سيتم تنفيذ رد اتصال useEffect مرة أخرى // تم تمرير المعلمة الثانية [] ، مما يعني أنه لا يوجد أحد يقوم بالكشف عن تنفيذ رد اتصال useEffect مرة واحدة فقط، وهو ما يعادل خطاف ComponentDidMount // لا تمر المعلمة الثانية بالمعلمات طالما أن المكون يحتوي على تغيير في الحالة، سيتم تنفيذ رد اتصال useEffect، وهو ما يعني أنه لا يمكن تنفيذ رد اتصال useEffect إلا مرة واحدة يعادل وظيفة ربط ComponentDidUpdate ChangeVariable(){
        setVariable((variable) => متغير +1) // المعلمة التي تم تمريرها في رد الاتصال لـ setVariable متغيرة
    }
    يجعل (
        <ديف> 
            <button onclick = {change}>انقر فوقي لإنشاء المتغير+1</button>
        </div>
    )
}

أشياء يجب ملاحظتها عند استخدام الخطافات

: 1. استخدم الخطافات فقط في الطبقة الخارجية للوظائف المكونة. لا تستدعي الخطافات في الحلقات أو الشروط أو الوظائف المتداخلة

.
تصدير الوظيفة الافتراضية useState_Demo() {
   // هذا هو useEffect(() => {}) الصحيح
    
   // الخطأ 1، استخدام الحكم الشرطي if(true) {
        useEffect(() => {})
   }
   // الخطأ 2، استخدام الحلقة while(true) {
        useEffect(() => {})
   }
  // الخطأ 3، استخدام useEffect(() => { المتداخل
      useEffect(() => {})
  })
}

استيراد React، (useState، useEffect) من 'react'

خارج وظيفة المكون.

// خطأ 1، يتم استخدام useState خارج وظيفة المكون
const [variable, setVariable] = useState(0);
// الخطأ 2، يتم استخدام useEffect خارج وظيفة المكون
useEffect(() => {})
تصدير الوظيفة الافتراضية useState_Demo() {
   // من الصحيح استخدامه في وظيفة المكون const [variable, setVariable] = useState(0);
}

3. لتجنب الأخطاء المذكورة أعلاه، يمكنك تثبيت البرنامج الإضافي eslint-plugin-react-hooks ESLint للتحقق من الأخطاء في التعليمات البرمجية.

المخصصة

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

الفعل
وظيفة استخدام هوك (initState) {
  const [متغير، setVariable] = useState(initState)
  متغير الإرجاع؛
}
// استخدم الخطاف المخصص
تصدير الوظيفة الافتراضية useState_Demo() {
    constvariState = useHook(0)
}

ربما تتساءل، هل سيتم استخدام نفس الخطاف في حالة مشاركة مكونات متعددة؟

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