הפק את המרב מ-React Hooks עם השיטות המומלצות האלה

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

למד הכל על היסודות של React Hooks וגלה כמה שיטות עבודה מומלצות לשימוש בהם ביישומי React שלך.

מה הם React Hooks?

React Hooks מאפשרים לך להשתמש במצב ותכונות React אחרות מבלי לכתוב קוד נוסף. הוקס הם דרך מצוינת להפוך את הקוד שלך לקריא וניתן יותר לתחזוקה.

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

מתי כדאי להשתמש ב-React Hooks?

עליך להשתמש ב-React Hooks בכל פעם שאתה צריך להוסיף פונקציונליות נוספת לרכיב. לדוגמה, אם אתה צריך לעקוב אחר קלט של משתמש, תשתמש ב-useState hook. אם אתה צריך להביא נתונים מ-API, תשתמש ב-useEffect hook. אתה יכול גם צור ווים מותאמים אישית עבור קריאות API.

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

שיטות עבודה מומלצות עם React Hooks

עכשיו כשאתה יודע מה הם React Hooks ומתי להשתמש בהם, בואו נדבר על כמה שיטות עבודה מומלצות.

1. התקשר רק מפונקציות React

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

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

הנה דוגמה לרכיב פונקציית React:

יְבוּא תגובה, { useState } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
const [count, setCount] = useState(0);
לַחֲזוֹר (
<div>
<ע>{לספור}</p>
<לחצן onClick={() => setCount (ספירה + 1)}>
 לחץ עלי
</button>
</div>
 );
}

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

יְבוּא תגובה, { רכיב } מ 'לְהָגִיב';
מעמדאפליקציהמשתרערְכִיב{
 מצב = {
 ספירה: 0
 };
render() {
לַחֲזוֹר (
<div>
<ע>{this.state.count}</p>
<לחצן onClick={() => this.setState({ count: this.state.count + 1 })}>
 לחץ עלי
</button>
</div>
 );
 }
}

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

2. השתמש רק ב- UseEffect Hook

אם אתה משתמש בהוק useEffect, עליך להשתמש רק באחד לכל רכיב. הסיבה לכך היא ש-useEffect פועל בכל פעם שרכיב מעבד.

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

יְבוּא תגובה, { useState, useEffect } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
const [count, setCount] = useState(0);
useEffect(() => {
 console.log('זה יפעל בכל פעם שרכיב האפליקציה יעבד!');
 }, []);
useEffect(() => {
 console.log('זה יפעל גם בכל פעם שרכיב האפליקציה יעבד!');
 }, []);
לַחֲזוֹר (
<div>
<ע>{לספור}</p>
<לחצן onClick={() => setCount (ספירה + 1)}>
 לחץ עלי
</button>
</div>
 );
}

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

יְבוּא תגובה, { useState, useEffect } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
const [count, setCount] = useState(0);
useEffect(() => {
 console.log('זה יפעל בכל פעם שרכיב האפליקציה יעבד!');
 console.log('זה יפעל גם בכל פעם שרכיב האפליקציה יעבד!');
 }, []);
לַחֲזוֹר (
<div>
<ע>{לספור}</p>
<לחצן onClick={() => setCount (ספירה + 1)}>
 לחץ עלי
</button>
</div>
 );
}

זה אומר שאתה יכול להתקשר ל-React Hooks רק מהדוגמה הראשונה. אם תנסה להתקשר ל-React Hooks מהדוגמה השנייה, תקבל שגיאה.

3. השתמש ב-Hooks ברמה העליונה

אחת השיטות המומלצות עם React Hooks היא להשתמש בהן ברמה העליונה. עליך להימנע משימוש בווים בתוך לולאות, תנאים או פונקציות מקוננות. לדוגמה, אם אתה משתמש ב-State בתוך לולאה for, בכל פעם שהלולאה פועלת, React תיצור משתנה מצב חדש. זה יכול להוביל להתנהגות בלתי צפויה.

יְבוּא תגובה, { useState } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
ל (לתת אני = 0; אני < 10; i++) {
// אל תעשה את זה!
const [count, setCount] = useState(0);
 }
לַחֲזוֹר (
<div>
<ע>{לספור}</p>
<לחצן onClick={() => setCount (ספירה + 1)}>
 לחץ עלי
</button>
</div>
 );
}

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

במקום להשתמש ב-State בתוך לולאה, אתה יכול להכריז על משתנה מצב מחוץ ללולאה. בדרך זו, React תיצור רק משתנה מצב אחד ותעדכן אותו בהתאם.

יְבוּא תגובה, { useState } מ 'לְהָגִיב';
פוּנקצִיָהאפליקציה() {
// זו הדרך הנכונה להשתמש ב-useState בתוך לולאה
const [count, setCount] = useState(0);
ל (לתת אני = 0; אני < 10; i++) {
// ...
 }
לַחֲזוֹר (
<div>
<ע>{לספור}</p>
<לחצן onClick={() => setCount (ספירה + 1)}>
 לחץ עלי
</button>
</div>
 );
}

4. אל תשתמש יתר על המידה בווים

React Hooks הם כלי רב עוצמה, אך כדאי להימנע משימוש יתר בהם. אם אתה מוצא את עצמך משתמש במספר Hook בכל רכיב, ייתכן שאתה משתמש בהם יותר מדי.

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

הוסף פונקציונליות נוספת באמצעות React 18 Hooks

עם שחרורו של React 18, ישנם ווים חדשים זמינים. כל וו הוא ספציפי לתכונה מסוימת של React. אתה יכול למצוא רשימה של כל הווים הזמינים באתר React. אבל הווים הנפוצים ביותר הם עדיין useState ו-useEffect.