ביצוע הבחירה בין רכיבי כיתה לרכיבים פונקציונליים ב-React

הבדלי ליבה

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

רכיבי מחלקה מוגדרים באמצעות מחלקה שמרחיבה את המחלקה React.Component. הם עשירים יותר בתכונות ויש להם יותר אפשרויות לטיפול באירועי מצב ומחזור חיים. כך נראה רכיב מחלקה:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

רכיבים פונקציונליים הם רק פונקציות JavaScript שמחזירות אלמנט React. הם פשוטים יותר ממרכיבי הכיתה וקלים יותר לקריאה ולכתיבה. הנה אותו רכיב כמו לעיל, כתוב כרכיב פונקציונלי:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

מתי להשתמש במה

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

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

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

3. ארגון: רכיבי מחלקה יכולים להקל על ארגון הקוד שלך, מכיוון שאתה יכול לקבץ שיטות קשורות יחד באותו רכיב. זה יכול להקל על איתור ותחזוקת הקוד.

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

1. כאשר אינך צריך להשתמש בשיטות מצב או מחזור חיים: אם אינך צריך להשתמש בשיטות מצב או מחזור חיים, אז רכיב פונקציונלי הוא בחירה טובה, מכיוון שהוא פשוט וקל יותר לקריאה ולכתיבה מאשר רכיב מחלקה.

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

3. כאשר אתה רוצה לייעל את הביצועים: מכיוון שרכיבים פונקציונליים הם טהורים, ניתן לייעל אותם בקלות רבה יותר על ידי React, מה שעשוי להביא לביצועים טובים יותר.

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

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

useEffect & useState

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

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

כך היית מיישם useEffect ו useState בתוך הרכיבים הפונקציונליים שלך

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

כאן, יש לנו רכיב שעוקב אחר ספירה, ומציג את הספירה הנוכחית למשתמש. הרכיב משתמש ב- useState הוק כדי להוסיף מצב לרכיב הפונקציונלי, ואת useEffect הוק לביצוע פעולה (עדכון כותרת המסמך) כאשר הספירה משתנה.

המנות העיקריות

אלו הם האפשרויות העיקריות בכל הנוגע לבחירה בין רכיבי כיתה לרכיבים פונקציונליים ב-React:

1. רכיבי מחלקה מוגדרים באמצעות מחלקה שמרחיבה את המחלקה React.Component, ויש להם אפשרויות נוספות לטיפול באירועי מצב ומחזור חיים.
2. רכיבים פונקציונליים הם רק פונקציות JavaScript שמחזירות אלמנט React, והן פשוטות וקלות יותר לקריאה ולכתיבה.
3. עליך להשתמש ברכיבים פונקציונליים אלא אם כן עליך להשתמש בתכונה שזמינה רק ברכיבי מחלקה, כגון שיטות מצב או מחזור חיים.
4. אתה יכול להשתמש בווים useState ו-useEffect כדי להוסיף מצב ולבצע תופעות לוואי ברכיבים פונקציונליים.
5. בסך הכל, הבחירה בין רכיבי מחלקה לרכיבים פונקציונליים מסתכמת במה שעובד הכי טוב עבור הצרכים שלך ומה שהופך את הקוד שלך לקל ביותר לקריאה ולהבנה.

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

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://www.codementor.io/maximiliangeiger/making-the-choice-between-class-components-and-functional-components-in-react-20uvaeyqci