אויב איר זענט אַ רעאַקט דעוועלאָפּער וואָס האט נישט נאָך געלערנט וועגן רעאַקט כוקס, איצט איז דער מאָמענט. דעם פּאָסטן וועט גיין דורך די UseEffect React Hook אין דעטאַל. עס איז דער קרוק עקוויוואַלענט פון אַ שווייצער אַרמיי מעסער. עס סאַלווז אַ פאַרשיידנקייַט פון ישוז, ווי ווי צו באַקומען דאַטן ווען אַ קאָמפּאָנענט מאַונץ, ווי צו לויפן קאָד ווען אַ שטאַט אָדער אַ אָנשפּאַר ענדערונגען, ווי צו שטעלן טיימערז אָדער ינטערוואַלז, און אַזוי אויף.
א UseEffect איז גענוצט פֿאַר כּמעט אַלץ איר ווילן צו "טאָן" אין אַ רעאַקט קאָמפּאָנענט וואָס איז נישט צוריקקומען JSX (קיין טיפּ פון זייַט ווירקונג). איר קען אויך האָבן עטלעכע נוצן יפעקץ פּער קאָמפּאָנענט.
אַלע דעם מאַכט קומט אין אַ פּרייַז: אויב איר פֿאַרשטיין ווי עס אַרבעט, עס קען זיין פּערפּלעקסינג. אין דעם פּאָסטן, מיר וועלן קוקן אין אַ פאַרשיידנקייַט פון ביישפילן אַזוי אַז איר קענען אָנכאַפּן די קאַנסעפּטשואַל מאָדעל און צולייגן עס צו דיין אייגענע קאָד.
רעאַקט כוקס – וואָס עס איז טריינג צו סאָלווע?
כוקס זענען ערשטער באַקענענ אין רעאַקט ווערסיע 16.8 און זענען איצט יוטאַלייזד דורך פילע רעאַקט פּראַדזשעקס. כוקס מנצח די פּראָבלעם פון קאָד יבערכאַזערונג צווישן קאַמפּאָונאַנץ. זיי זענען געשריבן אָן די נוצן פון קלאסן. דאָס טוט נישט מיינען אַז רעאַקט איז פארלאזן קלאסן; כוקס זענען פשוט אַן אנדער ברירה אופֿן.
רעאַקט אַלאַוז איר צו געשווינד שאַפֿן סאַפיסטאַקייטיד קאַמפּאָונאַנץ מיט סטאַטעפול לאָגיק. עס איז שווער צו באַזונדער די קאַמפּאָונאַנץ זינט די קלאַס רילייז אויף רעאַקט ליפעסיקלע מעטהאָדס. דאָס איז ווו רעאַקט האָוקס קומען אין.
זיי לאָזן איר צו טיילן אַ קאָמפּאָנענט אין קלענערער פאַנגקשאַנז. אַנשטאָט דיוויידינג קאָד אין קלענערער ברעקלעך באזירט אויף ליפעסיקלע מעטהאָדס, איר קען איצט צולייגן און באַזונדער קאָד אין קלענערער וניץ דיפּענדינג אויף פאַנגקשאַנאַליטי.
וואָס איז UseEffect Hook?
כוקס זענען פאַנגקשאַנז וואָס לאָזן איר אַקסעס שטאַט און אנדערע רעאַגירן קייפּאַבילאַטיז אָן שרייבן ES6 קלאסן. די רעאַגירן כוקס אַפּי האט אַ קרוק גערופֿן useEffect. אויב איר זענט באַקאַנט מיט רעאַגירן לעבן סייקאַלז, די UseEffect קרוק איז די זעלבע ווי די componentDidMount, componentDidUpdate, און componentWillUnmount לעבן ציקל מעטהאָדס קאַמביינד.
לויט די רעאַקט האָאָקס דאַקיומענטיישאַן, עס איז געווען באשאפן צו סאָלווע עטלעכע פון די ישוז מיט ES6 קלאַס קאָמפּאָנענט לעבן ציקל מעטהאָדס.
Syntax
דער ערשטער אַרגומענט איז אַ קאַללבאַק פונקציע, וואָס איז עקסאַקיוטאַד דורך פעליקייַט נאָך יעדער ופפירן. דער צווייטער פּאַראַמעטער איז אַן אַפּשאַנאַל אָפענגיקייַט מענגע וואָס ינסטראַקץ די קרוק צו רופן צוריק בלויז אויב די ציל שטאַט ענדערונגען.
די קרוק קאַמפּערז די היסטארישע און פאָרשטעלן שטאַטן פון יעדער דעפּענדענסי. אויב די צוויי וואַלועס טאָן ניט גלייַכן, די קרוק ינוואָוקס די קאַללבאַקק ספּעסיפיעד אין דער ערשטער פּאַראַמעטער. אָפענגיקייַט ערייז ענדערן די געוויינטלעך קאַללבאַק נאַטור און גאַראַנטירן אַז די האָאָק איגנאָרירט אַלע אנדערע קאַמפּאָונאַנץ אין די קאָמפּאָנענט פאַרנעם.
יקערדיק באַניץ
צו ראַטעווען אַ אָנזאָג, איך נוצן React useState אין די קאָד מוסטער אויבן. נאָך דעם, איך נעמען מיין אָנזאָג שטאַט בייַטעוודיק און דרוקן עס אויף דעם עקראַן. אָבער, איך איצט נוצן עפעקט צו מאָדיפיצירן דעם אָנזאָג אַ רגע נאָך די קאָמפּאָנענט איז מאָונטעד.
איך האָבן ינסערטאַד מיין ווירקונג הינטער די UseState שורה נאָך ימפּאָרטינג UseEffect פֿון די רעאַקט פריימווערק. דער ערשטער פּאַראַמעטער צו נוצןEffect איז אַ פֿונקציע. ווען די פונקציע האַנדלער איז עקסאַקיוטאַד, עס וועט נעמען קעיר פון קיין זייַט יפעקץ איר צושטעלן. די פֿונקציע איז אַ קאַללבאַקק פֿונקציע וואָס איז גערופֿן ווען איינער פון די רעאַקט קאָמפּאָנענט ליפעסיקלע געשעענישן אַקערז.
ווען צו נוצן עס?
די UseEffect קרוק קען זיין נוציק אין אַ פאַרשיידנקייַט פון סיטואַטיאָנס. די פאלגענדע זענען די מערסט וויכטיק:
- מיר קענען טוישן דעם פּאַראַמעטער פֿון דער קליענט זייַט ווען מיר וועלן צו ברענגען דאַטן דיפּענדינג אויף אַ סאַפּלייד אַרגומענט. עס וועט זיין ריקאָלד נאָך דער פּאַראַמעטער איז דערהייַנטיקט מיט פריש דאַטן.
- אויב מיר ווילן צו צוריקקריגן דאַטן פון אַן API ענדפּוינט און ווייַזן עס אויף די קליענט זייַט. ווען אונדזער קאָמפּאָנענט רענדערז, די פֿונקציע אָדער האַנדלער געגעבן צו די UseEffect קרוק איז עקסאַקיוטאַד, און דאַטן אין די קאָמפּאָנענט שטאַטן זענען ריטריווד. די סטאַטוסעס זענען דעמאָלט אָנגעשטעלט אין באַניצער צובינד קאַמפּאָונאַנץ.
- ווען דיין קאָמפּאָנענט רילייז אויף דאַטן פון די דרויסנדיק וועלט און מיר קענען נישט ענשור אַז דאַטן וועט אָנקומען, מיר זאָל נוצן Effect (אפֿשר דער סערווער איז דאָרט). אלא ווי פארווארפן פּראָבלעמס און פּרעווענטינג אנדערע קאַמפּאָונאַנץ פון זייַענדיק געוויזן, שטעלן זיי אין די UseEffect קרוק.
ניצן קאַסעס
אויב דער קאָמפּאָנענט שייַעך-רענדערז נאָך דער ערשטער לויפן, עס וועט נישט ויספירן.
ווען אַ קאָמפּאָנענט רענדערז אָדער שייַעך-רענדערז, עס זאָל שטענדיק זיין עקסאַקיוטאַד.
דורך פעליקייַט, די פּראָגראַם לויפט בלויז אַמאָל. דערנאָך, אויב די פּראַפּ וואַלועס טוישן, לויפן:
פֿאַר ייסינגקראַנאַס אַקטיוויטעטן, שטענדיק נוצן useEffect.
useEffect קאָד בלאַקס זענען קלאָר ווי דער טאָג מאַרקערס פון ייסינגקראַנאַס דזשאָבס פֿאַר דיין יונגערמאַן דעוועלאָפּערס. עס איז מעגלעך צו שאַפֿן ייסינגקראַנאַס קאָד אָן ניצן UseEffect, אָבער דאָס איז נישט דער "רעאַקט אופֿן," און עס ינקריסיז ביידע די קאַמפּלעקסיטי און די ריזיקירן פון מיסטייקס.
ניצן UseEffect אַנשטאָט פון שרייבן ייסינגקראַנאַס קאָד וואָס קען האַלטן די וי איז אַ באַוווסט טעכניק אין די רעאַקט קהל, ספּעציעל ווי די רעאַקט מאַנשאַפֿט האט געבויט עס צו דורכפירן אַ זייַט ווירקונג.
אן אנדער מייַלע פון ניצן עס איז אַז דעוועלאָפּערס קענען פשוט אָפּשאַצן די קאָד און גלייך דעטעקט קאָד וואָס איז לויפן "אַרויס די קאָנטראָל לויפן," וואָס ווערט וויכטיק בלויז נאָך דער ערשטער רענדערינג ציקל. דערצו, די בלאַקס זענען פּאַסיק פֿאַר יקסטראַקשאַן אין ריוזאַבאַל און אפילו מער סעמאַנטיק מנהג כוקס.
א ביישפיל
ניצן די useEffect קאָד, פאַרגרעסערן אַ נומער פּער סעקונדע.
סאָף
פארשטאנד די אַנדערלייינג פּלאַן פּרינסאַפּאַלז און בעסטער פּראַקטיסיז פון די UseEffect Hook, אין מיין מיינונג, איז אַ קריטיש בקיעס צו לערנען אויב איר ווילן צו ווערן אַ ווייַטער-מדרגה רעאַקט דעוועלאָפּער.
צו קיצער, די UseEffect Hook נעמט אַ פונקציע וואָס כולל ימפּעראַטיוו, פּאַטענטשאַלי ווירקונג פול לאָגיק. די אָפענגיקייַט מענגע, וואָס איז די רגע פּאַראַמעטער, קענען זיין געוויינט צו השפּעה אויף דער דורכפירונג. ווען איר האַנדלען מיט עס, עס איז אויך נייטיק צו שרייַבן רייניקונג קאָד ניצן די צוריקקומען פונקציע.
לאָזן אונדז וויסן אין די באַמערקונגען אויב דער אַרטיקל איז נוציק.
לאָזן אַ ענטפֿערן