החל מגרסה 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

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