React Hooks הם פיצ'ר שמאפשרים להשתמש במצבי קומפוננטות ופיצ'רים נוספים של React ללא צורך בכתיבת מחלקות. מאז גרסה 16.8 של React, Hooks הפכו לדרך הפופולרית ביותר לכתיבת קומפוננטות. במאמר זה נסקור את Hooks הבסיסיים: useState, useEffect, useContext, useReducer ו-useRef, כולל דוגמאות קוד והסברים מפורטים.
useState
ה-Hook useState מאפשר לנו לנהל מצבי קומפוננטות בפונקציות.
דוגמה:
import React, { useState } from 'react';
function Counter() {
// הגדרת מצב ראשוני
const [count, setCount] = useState(0);
return (
<div>
<p>לחצת על הכפתור {count} פעמים</p>
<button onClick={() => setCount(count + 1)}>
לחץ כאן
</button>
</div>
);
}
בפונקציה זו, useState מחזיר מערך עם שני איברים: המצב הנוכחי ופונקציה לעדכון המצב.
useEffect
ה-Hook useEffect מאפשר לבצע פעולות תופעות לוואי בקומפוננטות פונקציונליות, כמו קריאות API או עדכון ה-DOM.
דוגמה:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// ביצוע פעולת תופעת לוואי לאחר כל רינדור
useEffect(() => {
document.title = `לחצת ${count} פעמים`;
});
return (
<div>
<p>לחצת על הכפתור {count} פעמים</p>
<button onClick={() => setCount(count + 1)}>
לחץ כאן
</button>
</div>
);
}
במקרה זה, useEffect משנה את כותרת המסמך לאחר כל רינדור.
useContext
ה-Hook useContext מאפשר גישה לקונטקסט בקלות וללא צורך בכתיבת קומפוננטת צרכן.
דוגמה:
import React, { useContext } from 'react';
// יצירת קונטקסט
const MyContext = React.createContext();
function Display() {
const value = useContext(MyContext);
return <div>{value}</div>;
}
function App() {
return (
<MyContext.Provider value="Hello World">
<Display />
</MyContext.Provider>
);
}
כאן, useContext משמש לגישה לערך של הקונטקסט בצורה פשוטה.
useReducer
ה-Hook useReducer דומה ל-useState אבל מתאים יותר למצבים מורכבים בהם יש צורך בניהול מצבים עם לוגיקה מסובכת יותר.
דוגמה:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>לחצת על הכפתור {state.count} פעמים</p>
<button onClick={() => dispatch({ type: 'increment' })}>
הוסף
</button>
<button onClick={() => dispatch({ type: 'decrement' })}>
הפחת
</button>
</div>
);
}
useReducer מתאים למצבים בהם ניהול מצבים דורש יותר לוגיקה מאשר ב-useState.
useRef
ה-Hook useRef משמש לשמירת ערכים שאינם משפיעים על רינדור הקומפוננטה.
דוגמה:
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}
כאן, useRef משמש לגישה ישירה לאלמנט ה-DOM.
סיכום
React Hooks מאפשרים לנו לכתוב קומפוננטות פונקציונליות בצורה יעילה וברורה יותר. במאמר זה סקרנו את ה-Hooks הבסיסיים: useState, useEffect, useContext, useReducer ו-useRef, יחד עם דוגמאות קוד והסברים לביצוע. שימוש נכון ב-Hooks יכול לשפר את איכות הקוד ולייעל את תהליך הפיתוח.
במאמר הבא נסקור את סוגי ה Hooks המתקדמים יותר.
אם מעניין אותכם להתמקצע בריאקט או לעשות הסבה טכנולוגית לצוות שלכם, מוזמנים לדבר איתנו על קורס React
