כיצד לכפות עדכון של רכיב React

מבוא

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

React Rerenders

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

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

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

כפיית עדכונים על רכיבים מבוססי כיתה

לרכיב המחלקה יש שיטה מובנית לעיבוד מחדש של רכיב, הנקראת forceUpdate(), המשמש לאלץ רכיב לבצע רינדור מחדש. אתה יכול לקרוא עוד על forceUpdate() שיטה ב-React's אתר רשמי.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

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

להלן דוגמה כיצד לכפות עדכון על רכיב מבוסס כיתה:

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

בשיטה הזו קורה הרבה יותר ממה שזה נראה. למשל, להתקשר forceUpdate() מפעיל את שיטות מחזור החיים גם עבור רכיבי הילד. וכפי שאנו יודעים עם React, הוא יעדכן את ה-DOM רק אם הסימון באמת השתנה.

ניתן לגשת אל קוד חי כאן.

כפיית עדכונים על רכיבים פונקציונליים

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

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

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

משתמש ב useReducer וו

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

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

השתמש useState וו

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

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

משתמש ב useState ו useCallback ווים

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

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

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

סיכום

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