כפי שציינתי הפוסט הקודם: מדריך ריאקט – classes, functional component & hooks העולם של מפתחי ריאקט הולך לכיוון של רכיבים כפונקציות, ולכן השימוש בהוקים הוא נפוץ יותר. ריאקט מביאים איתם אוסף של hooks מאד שימושיים שאותם נרצה להכיר. ונתחיל בהוק הראשון והנפוץ ביותר (או לפחות המוכר ביותר)
מדריך ריאקט בנושא: useState
למעשה השימוש ב useState מזכיר את הרעיון של setState ו State בקלאסים. אבל זה לא נרכיב על קלאסים כרגע כי זה פחות רלוונטי, אבל מי שמכיר קלאסים אולי זה יעזור לו להבין.
בעזרת useState תוכלו להנהל מידע "מקומי", כלומר של הרכיב עצמו , למשל :
import React, { useState } from 'react'; function CountCrocs() { // Declare a new state variable, which we'll call "count" const [totalCrocs, addCrocs] = useState(0); return ( <div> <p>תנינים ברשת {count} יש לך </p> <button onClick={() => addCrocs(totalCrocs + 1)}> תפוס תנין </button> </div> ); }
נסביר לעומק על היכולות של useState ומה הוא עושה
קודם כל יש לייבא את useState מתוך react.
לאחר מכן נגדיר משתנה מערכי (Destructuring assignment) . המשתנה הראשון יהיה ההערך עצמו. המשתנה השני הוא הפונקציה שמנהלת את המידע . למשל במקרה שלנו מוסיפה אחד, וכמובן מחזירה אותו לתוך הערך של totalCrocs.
אפשר גם להשתמש בצורה הבאה ולראות שניתן גם לעשות שימוש בערך הקודם שהוגדר ל totalCrocs:
import React, { useState } from 'react'; function CountCrocs() { // Declare a new state variable, which we'll call "count" const [totalCrocs, addCrocs] = useState({type: null}); return ( <div> <p>תנינים ברשת {count.type} יש לך </p> <button onClick={() => addCrocs({type: 'codcodile'})}> תפוס תנין </button> </div> ); }
למעשה הפונקציה של useState מקבלת פוקציה שלוקחת את הערך הקודם ששמרה ומוסיפה לו 1 (המקרה שלנו) .
שימושים נוספים ל useState הם למשל לשמור מערך של מידע או אובייקט . לדוגמה:
סיכום useState Hook
שימושים רבים עושים עם react useState, וכן זהו הוק פשוט להבנה ומימוש, ההוקים הבאים הולכים ונהיים מורכבים יותר ובהמשך המדריך גם custom hooks משלכם. לכן חשוב לתרגל ולהבין היטב את ההוקים הראשונים הפשוטים על מנת להשתפר ולהתקדם בהמשך בלי להסתבך.
ההוק הבא שלנו הוא useEffect
קודם כל רציתי להודות לך על התוכן…
דבר שני לא כל כך הבנתי מה הערך של המשתנה count. בדוגמאות למעלה
היי מה נשמע? סורי על האיחור בתשובה איכשהו התפספסה לנו תגובתך.
הערך COUNT מייצג מספר טבעי בדוגמה הראשונה ובדוגמה השניה הוא מסוג אובייקט . אתה יכול לדעת את סוגו לפי מה שמוזר באתחול של ההוק למשל: useState(0); הוא 0 ולכן הוא NUMBER.
מה שיפה שגם אם הגדרת אותו כאובייקט וגם אם האובייקט שונה, ריאקט עדיין ידע שתוכן האובייקט השתנה וירנדר בהתאם.