מדריך ריאקט – classes, functional component & hooks

מי שמכיר ריאקט עוד מראשיתו לא זוכר שהיו בכלל hooks או functional components (כי לא היו). והיום המצב שונה והשימושיות בhooks ו FC גדולה יותר מאשר קלאסים ואפילו היוצרים של ריאקט נוטים להמליץ לנו יותר על שימוש בהוקים . אבל לרוב יציינו שאין זה אומר שעלינו להחליף את כל הפרויקט שלנו אשר הינו מבוסס קלאסים. בסופו של יום, השימוש העיקרי הוא לייצר קומפוננטות, כך שניתן גם FC גם בקלאסים. מה יותר טוב ? נגלה בהמשך הספוט.

אז מה ההבדל בתכלס? classes או functional components ?

שני הגישות בסופו של דבר יודעים לייצר קומפוננטות עם פונקציונאליות. רק שהייתרון מגיע לFC כשהגיעו ההוקים (hooks). כך נוכל להשמיש פונקציונאליות לכל FC שנרצה וגם לעשות שימושים חוזרים ב custom hooks .

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

להלן דוגמאות של שימושים השונים והבדלים בניהם:

functional component:

function GreetingFunctional(props){
  return{
    <div>{props.text}</div>
	}
}
export default GreetingFunctional;

class component:

import React from 'react';

class GreetingClass
  extends React.Component{
cunstructor(props){
super(props)
}
  render(){
  return (
      <div>{this.props.text}</div>
  )
  }
}
export default GreetingClass;

• קודם כל אפשר לראות כי FC קצרה יותר מקלאס.
• קלאס דורש לפחות מטודה אחת, שהיא רנדר שבFC אין צורך בכך.
• צריך לייבא את props בקונסטרקטור וכן לעשות super בשביל להביא לתוך הקלאס שלנו את props מ React.Component.
• כמו כן אם נרצה לייבא יותר פונקציונאליות כמו מטודות ומידע כללי state קלאסים ידעו לעשות זאת טוב יותר. (עד שהגיעו ההוקים)

רקע נוסף על קלאסים

קלאסים מאפשרים לנו הרבה יותר ממה שיכולה לתת לנו FC . למשל דוגמה:

import React, { Component } from "react";
import { Table } from "react-bootstrap";
import { Consumer } from "../App";
export default class DataTable extends Component<{}, any> {
  constructor(props: any) {
    super(props);
  }
 
  state = {
    foo: false,
  };

  componentDidMount() {
    console.log('componentDidMount() lifecycle');
    this.setState({ foo: !this.state.foo });
  }
  componentWillUnmount(){
    console.log('componentWillUnmount() lifecycle');
    alert('this component is unmounted')
  }

  render() {
    console.log('Render lifecycle')
    return <h1>Hello</h1>
  }
}

• אפשר להשתמש ברנדר כמובן שלפעמים עושים בו שימושים רבים בשביל לפצל את הJSX
• לקומפוננטה יש State משלה והיא מנהלת אותו ומשנה אותו בעזרת setState
• Lifecycle – מאד שימושי למשל פה רואים שימוש ב componentDidMount , componentWillUnmount . ויש עוד הרבה (יהיה על זה פוסט שלם בהמשך)

אישית מאוד נח לי לעבוד עם קלאסים , אבל אני מבין את הכח שיש ל FC בטח שהכניסו לתמונה את עולם ההוקים…

הוקים בשילוב עם FC הם "דיל ברייקר"

אז כל מי שמאד אהב לעבוד עם קלאסים (כמוני) לא יכול היום להתעלם יותר מ FC וHOOKS שמאפשרים לנו להשמיש state ולנהל מידע של הקומפוננטה בקלות בעזרת הוק מובנה של ריאקט useState .

והוק נוסף הוא useEffect שהינו תחליף ל Lifecycle Methods שהינו רגילים בקלאסים.

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

1. useState
2. useEffect
3. useMemo
4. useCallback
5. useRef
6. useReducer
7. useContext

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

פוסטים קשורים:

מדריך react | ריאקט | איך מעבירים מידע בין קומפננטות באמצעות props מדריך אנימציות באנגולר מדריך אנימציות באנגולר – מתקדם בעיות נפוצות ב-react | קינפוג עם sass