Πώς να αναγκάσετε να ενημερώσετε ένα στοιχείο React

Εισαγωγή

Σε αυτό το άρθρο θα σας δείξουμε πώς να αναγκάσετε να ενημερώσετε ένα στοιχείο στο React.js. Πιο συγκεκριμένα, θα κάνουμε μια σύντομη εισαγωγή στις εκ νέου αποδόσεις του React, θα δείξουμε πώς να επιβάλουμε ενημερώσεις σε στοιχεία που βασίζονται σε κλάσεις και πώς να επιβάλουμε ενημερώσεις σε λειτουργικά στοιχεία.

React Re-Renders

Το ίδιο το React χειρίζεται αυτόματα την εκ νέου απόδοση στοιχείων για εσάς, στις περισσότερες περιπτώσεις. Η αιτία αυτού μπορεί να βασίζεται στο πότε έχουν ενημερωθεί τα στηρίγματα ή η κατάσταση. Έτσι, όταν μια κατάσταση ή μια ιδιότητα αλλάζει, το στοιχείο αποδίδεται εκ νέου. Τι γίνεται όμως αν το στοιχείο σας εξαρτάται από κάτι άλλο και όχι απαραίτητα από το κράτος ή την περιουσία σας; Σε αυτήν την περίπτωση, ίσως χρειαστεί να ενημερώσετε αναγκαστικά το στοιχείο, καθώς το React ενδέχεται να μην έχει εντοπίσει την αλλαγή.

Ας ρίξουμε μια ματιά στον τρόπο χρήσης αυτής της αναγκαστικής ενημέρωσης σε ένα στοιχείο React. Για να το δείξουμε αυτό, θα δημιουργήσουμε μια απλή εφαρμογή για δοκιμαστικούς σκοπούς.

Note: Θα καλύψουμε μερικές έννοιες του React, επομένως συνιστάται να έχετε βασικές γνώσεις για το React.

Επιβολή ενημερώσεων σε στοιχεία που βασίζονται σε κλάση

Το στοιχείο κλάσης έχει μια ενσωματωμένη μέθοδο για την εκ νέου απόδοση ενός στοιχείου, που ονομάζεται forceUpdate(), το οποίο χρησιμοποιείται για να αναγκάσει ένα στοιχείο να αποδοθεί ξανά. Μπορείτε να διαβάσετε περισσότερα για το forceUpdate() μέθοδος στο React Επίσημη ιστοσελίδα.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Note: Δεν συνιστάται να βασίζεστε στην ενημέρωση στοιχείων χρησιμοποιώντας το 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, η οποία μπορεί να χρησιμοποιηθεί σε λειτουργικά στοιχεία για ενημέρωση κατάστασης, εκτέλεση παρενεργειών κ.λπ. Θα χρησιμοποιήσουμε αυτά τα άγκιστρα προς όφελός μας για να κάνουμε ένα στοιχείο για εκ νέου απόδοση.

Ακολουθούν ορισμένα παραδείγματα για τον τρόπο επιβολής μιας ενημέρωσης σε ένα λειτουργικό στοιχείο:

Χρήση του 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 στο ότι ενημερώνουμε συνεχώς την κατάσταση για να επιβάλουμε την αλλαγή. Αντί να αυξήσουμε έναν μετρητή, όπως κάναμε στην τελευταία μέθοδο, εδώ απλώς εναλλάσσουμε μια τιμή boolean έτσι ώστε να ακυρώνεται σε κάθε κλήση.

Χρήση του 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>
    );
}

Και πάλι, αυτή η στρατηγική λειτουργεί αλλάζοντας το κράτος. Σε αυτήν την περίπτωση, αν και δεν αλλάζουμε τεχνικά το αξία του κράτους, εμείς are στέλνοντάς του ένα νέο αντικείμενο, το οποίο θεωρείται νέο από το React αφού δεν κάνει «βαθούς» ελέγχους ισότητας στην κατάσταση.

Όπως μπορείτε να δείτε, υπάρχουν αρκετοί τρόποι για να πετύχετε το ίδιο πράγμα εδώ. Λάβετε υπόψη ότι όλα αυτά είναι τεχνικά αντι-μοτίβα και θα πρέπει να αποφεύγονται όταν είναι δυνατόν. Ωστόσο, εάν δεν μπορείτε να επιλύσετε το υποκείμενο ζήτημα και πρέπει να ενημερώσετε αναγκαστικά ένα στοιχείο, τότε οποιαδήποτε από τις μεθόδους που δείξαμε εδώ θα πρέπει να λειτουργεί.

Συμπέρασμα

Σε αυτό το άρθρο είδαμε πώς να επιβάλλουμε ενημερώσεις στα στοιχεία του React. Είδαμε επίσης πώς μπορεί να επιτευχθεί αυτό τόσο σε λειτουργικά όσο και σε εξαρτήματα που βασίζονται στην κατηγορία. Αν και δεν είναι απαραίτητα καλή πρακτική, είναι χρήσιμο να κατανοήσουμε πώς λειτουργεί σε περίπτωση που χρειαστεί να τη χρησιμοποιήσουμε σε ειδικές περιπτώσεις.