קדימה אל תחכו, התקשרו : 072-3944399

חפש קורס:

צור קשר






    6
     

    מחזור החיים

     ב React Component

     

    נכתב על ידי המנטור והמדריך המנוסה בארץ – יניב ארד 

    מעביר את הקורס היחידי הכולל ליווי אישי ותמיכה 24/7 !

     

     

    רק בקורס React המתקדם בארץ, לןמדים בין היתר נושאים מתקדמים כמו מחזור החיים של React Component לעומק !

    קורס ה React של יניב ארד, המנטור והמדריך המוביל בארץ לקורסי ה Web, מקיף ומכיל את כל הדרוש כדי להפוך למומחה React עם חודשיים ניסיון !

    נכון – התלמידים של יניב מסיימים עם ידע השקול לחודשיים נסיון וזאת בזכות מתכונת Extreme70 המתקדמת בארץ – היחידה המועברת כ Bootcamp אינטנסיבי. יניב ארד, שנותן תמיכה וליווי לכל משתתף 24/7, מכשיר את אנשי הפיתוח של החברות הגדולות בארץ.

    המועמדים לקורס עוברים שיחה עם יניב כדי לוודא התאמתם לקורס. 

     

    הקורסים הקרובים

    החל מגרסה 16.3, נעשו כמה שינויים בארועים המרכיבים את מחזור החיים פקד React.

    במדריך בסיסי זה אעשה סקירה ואפרט על כל מחזור החיים המעודכן.

    מחזור החיים מחולק לשני שלבים :

    שלב ראשוני של יצירת הפקד
    שלב שלאחר יצירת הפקד – כל שאר מחזור החיים.
    בשלב הראשוני מופעלים לפי הארועים הבאים , לפי סדר זה:

    Constructor או בעברית הבנאי.

    זהו שלב ראשוני מאוד ולכן לא מבצעים כל לוגיקה עסקית ובטח שלא קריאות Ajax לשרת.

    בשלב זה נגדיר ונאתחל את ה State של הפקד, נשמור מידע שהגיע מה Props ונרשום את הפונקציות השונות.

    (getDerivedStateFromProps (nextProps, nextState

    שלב זה מופעל לפני שלב ה render, ולכן כל עדכון של ה State בצורה סינכרונית לא תגרום לרינדור הפקד.

    הפעולה נועדה בעיקר לממש לוגיקה עסקית התלוי בערכי ה Props שהגיעו בכדי להחזיר אובייקט State חדש ומעודכן.

    פונקציה זו אמורה להחזיר את ה State העדכני או null.

    חשוב להדגיש שפונקציה זו היא סטטית.

    Render

    בשלב זה נבנה ו״מצויר״ ה DOM של הפקד.

    כאן המקום להפעיל לוגיקה (כגון מימוש repeater) ולבנות את ה HTML בצורה דינמית.

    דגש חשוב – בשלב זה אסור לשלוח בקשות Ajax לשרת

    componentDidMount

    זהוהשלב האחרון ביצירה הראשונית של הפקד אשר מופעל כשהפקד כבר Mounted .

    לכן פה צריך לשלוח בקשות Ajax לשרת.

    מרגע שהסתיימה יצירת הפקד לראשונה, יופעלו הארועים הבאים כחלק ממחזור חיי הפקד מעתה ואילך.

    ארוע ראשון – (getDerivedStateFromProps (nextProps, nextState

    פונקציה זו תופעל בכל שינוי באחד מערכי ה Props (המגיעים לרוב מפקד אב שמכיל אותו) או בשינוי בכל אחד מערכי ה State .

    הפונקציה תחזיר את ה State החדש במידה ותלויה ב Props או null, במידה וה State הוא זה שהשתנה.

    ארוע שני – (shouldComponentUpdate(nextProps, nextState

    פונקציה זו תחזיר ערך boolean – האם לצייר מחדש את הפקד או לא.

    זה המקום לבדוק את ערכי ה Props או ה State העדכניים ולהחליט האם לצייר מחדש את הפקד.

    כאן ניתן לחסוך בביצועים במקרים מסוימים.

    ברירת המחדל היא שהפונקציה מחזירה true (וזאת הסיבה שהפקד תמיד מצוייר מחדש עם שינוי ה State או ה Props).

    במידה והפונקציה מחזירה false , שאר הפונקציות (הבאות) אחריה במחזור החיים לא יקראו.

    ארוע שלישי – getSnapShotBeforeRender

    פונקציה זו מופעלת רגע לפני שהשינויים משתקפים ב DOM. זה המקום לשמור מידע ויזואלי (כמו מיקום של Scroll bar) לפני שזה משתנה.

    השימוש בפונקציה זו לא שכיחה בכל מקרה.

    ארוע רביעי – (componentDidUpdate(prevProps, prevState

    הפונקציה הזאת נקראת מיד לאחר שעדכון הפקד מסתיים ומצויר מחדש.

    זה המקום לבצע פעולות אסינכרוניות כגון קריאות Ajax לשרת.

    זהו..זה כל מחזור החיים של פקד REACT

    חשוב מאוד להכיר ולדעת היטב את המיקום הנכון בו יש לשלב את הקוד במהלך מחזור החיים.

     

    קידום אתרים בגוגל קידום אתרים בגוגל