'בתגובה, הכל מרכיב'
אם אתה מכיר את React, אז בטח שמעת או קראת את הביטוי הזה פעמים רבות. אבל האם אתה יודע מה זה אומר בדיוק ואיך משתמשים בו? אם לא, קרא את הבלוג הזה כדי ללמוד הכל על רכיבי React והשלבים השונים במחזור החיים. אני בטוח שעד שתסיים בקריאת הבלוג הזה תהיה לך הבנה מלאה לגבי רכיבי React והמושגים הסובבים אותו. אך לפני שתמשיך, הסתכל במהירות על הנושאים עליהם אדון:
מהם רכיבי תגובה?
מוקדם יותר המפתחים נאלצו לכתוב 1000 שורות קוד לפיתוח יישום פשוט של עמוד יחיד. מרבית היישומים הללו עקבו אחר מבנה ה- DOM המסורתי וביצוע שינויים בהם היה מאתגר מאוד ומשימה מייגעת עבור המפתחים.הם נאלצו לחפש באופן ידני את האלמנט שנדרש לשינוי ולעדכן אותו בהתאם. אפילו טעות קטנה תוביל לכישלון היישום. יתר על כן, עדכון ה- DOM היה יקר מאוד. לפיכך, הוצגה הגישה המבוססת על רכיבים. בגישה זו, היישום כולו מחולק לנתחים לוגיים הנקראים רכיבים. ריאקט הייתה אחת המסגרות שבחרו בגישה זו.אם אתה מתכנן לבנות את הקריירה שלך בפיתוח אתרים, התחלה מוקדמת תפתח עבורך הרבה הזדמנויות.
בואו נבין כעת מהם המרכיבים הללו.
רכיבי תגובה נחשבים לאבני הבניין של ממשק המשתמש. כל אחד מהרכיבים הללו קיים באותו מרחב אך מתבצע באופן עצמאי זה מזה. לרכיבי תגובה יש מבנה משלהם, שיטות כמו גם ממשקי API. הם ניתנים לשימוש חוזר וניתן להזריקם לממשקים לפי הצורך. כדי להבין טוב יותר, שקול את ממשק המשתמש כולו כעץ.כאן מרכיב ההתחלה הופך לשורש וכל אחת מהחלקים העצמאיים הופכת לענפים, המחולקים עוד יותר לענפי משנה.
זה שומר על ממשק המשתמש שלנו מאורגן ומאפשר לשינויים בנתונים ומצב לוגית מהשורש לענפים ואז לענפי משנה. רכיבים מבצעים שיחות לשרת ישירות מצד הלקוח המאפשר ל- DOM לעדכן באופן דינמי מבלי לרענן את הדף. הסיבה לכך היא שרכיבי תגובה בנויים על הרעיון של בקשות AJAX. לכל רכיב יש ממשק משלו שיכול לבצע שיחות לשרת ולעדכן אותם. מכיוון שרכיבים אלה אינם תלויים זה בזה, כל אחד מהם יכול להתרענן מבלי להשפיע על אחרים או על ממשק המשתמש כולו.
אנו משתמשים React.createClass () שיטה ליצירת רכיב. יש להעביר לשיטה זו טיעון אובייקט אשר יגדיר את רכיב התגובה. כל רכיב חייב להכיל בדיוק אחד לְדַקלֵם() שיטה. זהו המאפיין החשוב ביותר של רכיב האחראי לניתוח ה- HTML ב- JavaScript, JSX. זֶה לְדַקלֵם() יחזיר את ייצוג ה- HTML של הרכיב כצומת DOM. לכן, כל תגי ה- HTML חייבים להיות כלואים בתגית סגורה בתוך ה- לְדַקלֵם() .
להלן קוד לדוגמה ליצירת רכיב.
ייבא תגובה מ'הגיב 'ייבא ReactDOM מהמחלקה' תגובה-דום 'MyComponent מרחיב את React.Component {render () {return (המזהה שלך הוא {this.state.id}
)}} ReactDOM.render (, document.getElementById ('תוכן'))מדינות לעומת אביזרים
תגובה מחזור החיים של הרכיב
React מספק שיטות שונות המודיעות כאשר מתרחש שלב מסוים במחזור החיים של רכיב. שיטות אלה נקראות שיטות מחזור החיים. שיטות מחזור חיים אלה אינן מסובכות במיוחד. אתה יכול לחשוב על שיטות אלה כמטפלים באירועים מיוחדים הנקראים בנקודות שונות במהלך חיי הרכיבים. אתה יכול אפילו להוסיף קוד משלך לשיטות אלה כדי לבצע משימות שונות. אם מדברים על מחזור החיים של הרכיב, מחזור החיים מחולק לארבעה שלבים. הם:
- שלב ראשוני
- עדכון שלב
- אביזרים משנים שלב
- שלב ניתוק הרכבה
כל אחד מהשלבים הללו מכיל כמה שיטות מחזור חיים אשר ספציפיות רק להם. אז בואו נגלה מה קורה במהלך כל אחד מהשלבים הללו.
א. שלב ראשוני - השלב הראשון של מחזור החיים של רכיב React הוא השלב הראשוני או השלב הראשוני. בשלב זה,הרכיב עומד להתחיל את דרכו ולעשות את דרכו ל- DOM. שלב זה מורכב מהשיטות הבאות המופעלות בסדר מוגדר מראש.
- getDefaultProps (): שיטה זו משמשת לציון ערך ברירת המחדל של this.props . זה נקרא לפני שהרכיב שלך בכלל נוצר או שאביזרים מההורה מועברים אליו.
- getInitialState (): שיטה זו משמשת ללפרט ערך ברירת המחדל של זה.מצב לפני שנוצר הרכיב שלך.
- componentWillMount (): זו השיטה האחרונה שתוכל להתקשר אליה לפני שהרכיב שלך יועבר ל- DOM. אבל אם אתה מתקשר setState () בתוך שיטה זו הרכיב שלך לא יעבד מחדש.
- לְדַקלֵם(): ת שיטה זו אחראית להחזרת צומת HTML בסיסי ויש להגדיר אותה בכל רכיב ורכיב. אתה יכול לחזור ריק אוֹ שֶׁקֶר למקרה שאתה לא רוצה להעביר שום דבר.
- componentDidMount (): ברגע שהרכיב מעובד ומונח על ה- DOM, זה שיטה נקראת. כאן תוכל לבצע פעולות שאילתת DOM.
ב. שלב עדכון - לאחר הוספת הרכיב ל- DOM, הם יכולים לעדכן ולעבד מחדש רק כאשר מתרחש שינוי במצב. בכל פעם שהמדינה משתנה, הרכיב מכנה את זה לְדַקלֵם() שוב. כל רכיב שמסתמך על הפלט של רכיב זה יקרא גם שלו לְדַקלֵם() שוב. זה נעשה כדי להבטיח שהרכיב שלנו מציג את הגרסה האחרונה של עצמו. לפיכך, כדי לעדכן את מצב הרכיבים בהצלחה, מופעלות השיטות הבאות בסדר הנתון:
- shouldComponentUpdate (): באמצעות שיטה זו תוכלו לשלוט בהתנהגות הרכיב שלכם לעדכן את עצמו. אם אתה מחזיר אמת מהשיטה הזו,הרכיב יתעדכן. אחרת אם שיטה זו מחזירה אשֶׁקֶר, הרכיב ידלג על העדכון.
- componentWillUpdate (): טהשיטה שלו נקראת jלפני שהרכיב שלך עומד לעדכן. בשיטה זו, אינך יכול לשנות את מצב הרכיב שלך על ידי התקשרות this.setState .
- לְדַקלֵם(): אם אתה מחזיר שקר באמצעות shouldComponentUpdate () הקוד שבפנים לְדַקלֵם() יופעל שוב כדי להבטיח שהרכיב שלך מציג את עצמו כראוי.
- componentDidUpdate (): לאחר עדכון והעיבוד של הרכיב, מופעלת שיטה זו. אתה יכול לשים כל קוד בשיטה זו, שאותה ברצונך לבצע לאחר עדכון הרכיב.
ג. שלב שינוי אבזרים - לאחר הרכיב הועבר ל- DOM, הפעם האחרת היחידה שהרכיב יתעדכן, מלבד שינוי המצב הוא כאשר ערך האביזר שלו משתנה. למעשה שלב זה עובד בדומה לשלב הקודם, אך במקום המדינה הוא עוסק באביזרים. לפיכך, לשלב זה יש רק שיטה אחת נוספת משלב העדכון.
מדריך למפתחי salesforce למתחילים
- componentWillReceiveProps (): שיטה זו מחזירה ארגומנט אחד המכיל את ערך ההצעה החדש שעומד להיות מוקצה לרכיב.
שאר שיטות מחזור החיים מתנהגות באופן זהה לשיטות שראינו בשלב הקודם.
- shouldComponentUpdate ()
- componentWillUpdate ()
- לְדַקלֵם()
- componentDidUpdate ()
ד.שלב ההפעלה -זהו השלב האחרון של מחזור החיים של הרכיבים בו הרכיב נהרס והוסר מה- DOM לחלוטין. הוא מכיל רק שיטה אחת:
- componentWillUnmount (): לאחר הפעלת שיטה זו, הרכיב שלך יוסר מה- DOM לצמיתות.בשיטה זו, יאתה יכול לבצע כל משימות הקשורות לניקוי כמו הסרת מאזינים לאירועים, עצירת טיימרים וכו '.
להלן תרשים מחזור החיים:
זה מביא אותנו לסוף הבלוג בנושא רכיבי תגובה. אני מקווה שבבלוג הזה הצלחתי להסביר בבירור מהם רכיבי תגובה, כיצד משתמשים בהם. אתה יכול להתייחס לבלוג שלי ב- , למקרה שתרצה ללמוד עוד על ReactJS.
אם אתה רוצה לקבל הכשרה ב- React וברצונך לפתח ממשקי משתמש מעניינים בעצמך, בדוק את ה- מאת אדוריקה, חברת למידה מקוונת מהימנה עם רשת של יותר מ -250,000 לומדים מרוצים הפרוסים ברחבי העולם.
יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות ונחזור אליך.