תגובה: ההבדל בין רכיב הכיתה לרכיב הפונקציונאלי

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

מהו רכיב?

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

הרכיב (תגובה) מוגדר כבלוק או תוכנית שניתן לעשות שימוש חוזר בתוכנית כולה (ולא באחרים), הקשורים לרוב לאלמנט ה- UI ולהתנהגותו.

עכשיו כשאתה יודע את היסודות, בואו נסתכל על שני סוגים של רכיבים שאתה יכול ליצור ב- React, Component Component and Functional Components.

מרכיב הכיתה

זה נקרא המרכיב העיקרי. יש לנו "כיתה" ב- JavaScript מאז ECMAScript 2015. React משתמש בתחביר זה כדי ליצור רכיב מצב עם מחזור חיים. המדינה משמשת לעתים קרובות לשינוי התנהגותם של בוחרינו או ילדיהם.

בואו נשבור את הקוד הזה. כאן יש לנו "מחלקת JS" שירושה את הפונקציה מ- React.Component, ולכן אנו מכריזים על בנאי שמקבל אבזרים כוויכוח. בשלב הבא, אנו קוראים לנתונים, אנו נדרשים ליצור רכיב מסוג זה כדי להעביר את הנתונים לרכיבי מחלקת האב.

"דרישה" הוא אובייקט שמקבל את כל התכונות בהן אנו משתמשים כתגית רכיב.

לרכיב המנורה יש הצעה בסיסית המספקת חסימת HTML עם טקסט וכפתורים.

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

"מצב" זה הוא אובייקט עם כמה מאפיינים המשתנים במהלך ביצוע הקורס. אין לשנות אותו ישירות, אלא בשיטת setState.

אתה יכול לשנות את המצב באופן הבא:

רכיב פונקציונלי

כעת, אם אנו רוצים ליצור רכיב מינימלי, פשוט וחסר מצב, זה יעזור לכם להפחית את כמות הקוד המשמשת ולהקל על עקרון ה- DRY. הרכיב הפונקציונלי הוא פונקציית JavaScript שמחזירה כמה Jxs.

קחו דוגמה לרכיב נורה.

כאן יש לנו פונקציה קבועה שמקבלת אובייקט פגום שנקרא lampState, היא הופכת למשתנה מקומי ומעריכה אם החזרת תג תמונה אחרת נכונה.

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

פעולה זו תשנה את תמונת הנורה כשאתה לוחץ על הכפתור.

מה דעתך על ווים?

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

תודה שקראתם, ואם תרצו או לא, תודיעו לי מה אתם חושבים. -