Een React-component geforceerd bijwerken

Introductie

In dit artikel laten we je zien hoe je een component in React.js geforceerd bijwerkt. Meer specifiek zullen we een korte introductie geven over React re-renders, we zullen laten zien hoe updates geforceerd kunnen worden in op klassen gebaseerde componenten, en hoe updates geforceerd kunnen worden in functionele componenten.

Reageren Re-renders

React zelf handelt in de meeste gevallen automatisch de re-renderingcomponenten voor je af. De oorzaak hiervan kan zijn gebaseerd op wanneer rekwisieten of staat zijn bijgewerkt. Dus wanneer een staat of eigenschap verandert, wordt de component opnieuw weergegeven. Maar wat als uw onderdeel afhankelijk is van iets anders en niet per se van uw staat of eigendom? In dat geval moet u mogelijk het onderdeel geforceerd bijwerken, omdat React de wijziging mogelijk niet heeft gedetecteerd.

Laten we eens kijken hoe we deze geforceerde update op een React-component kunnen gebruiken. Om dit te laten zien, gaan we een eenvoudige applicatie maken voor demo-doeleinden.

Note: We zullen enkele concepten van React behandelen, dus basiskennis van React is aan te raden.

Updates forceren op klassegebaseerde componenten

De klassecomponent heeft een ingebouwde methode om een ​​component opnieuw te renderen, genaamd forceUpdate(), die wordt gebruikt om een ​​component te dwingen opnieuw te renderen. U kunt meer lezen over de forceUpdate() methode op React's officiële website.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Note: Het is niet raadzaam om te vertrouwen op het bijwerken van componenten met behulp van de forceUpdate() methode. Wanneer je merkt dat je deze methode nodig hebt, moet je eerst proberen je code te analyseren en erachter te komen of er een andere reden is waarom React het onderdeel niet bijwerkt. Het kan zijn dat een bug dit veroorzaakt of dat je je code kunt herstructureren op een manier die React in staat stelt om de component op zichzelf correct opnieuw te renderen.

Hier is een voorbeeld van hoe u een update op een klasse-gebaseerde component forceert:

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

Er is veel meer aan de hand binnen deze methode dan het lijkt. Bellen bijvoorbeeld forceUpdate() activeert ook de levenscyclusmethoden voor de onderliggende componenten. En zoals we weten met React, wordt de DOM alleen bijgewerkt als de opmaak daadwerkelijk is gewijzigd.

U heeft toegang tot de live code hier.

Updates forceren op functionele componenten

Functionele componenten hebben geen ingebouwde methode om componenten opnieuw te renderen zoals hun op klassen gebaseerde tegenhangers. Dit betekent dat we niet de forceUpdate() methode die ons ter beschikking staat. Bedenk echter dat in React componenten doorgaans opnieuw worden weergegeven als gevolg van status- of propwijzigingen. Hiermee kunnen we manieren vinden om upate te forceren.

Vanaf v16.8+ heeft React een concept genaamd Hooks dat kan worden gebruikt in functionele componenten voor het bijwerken van de status, het uitvoeren van bijwerkingen, enz. We zullen deze hooks in ons voordeel gebruiken om een ​​component opnieuw te laten renderen.

Hier zijn enkele voorbeelden van hoe u een update in een functionele component kunt forceren:

De useReducer haak

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

function handleClick() {
    forceUpdate();
}

Een verloopstuk in React wordt meestal gebruikt als je complexe statuslogica en acties hebt. Hier gebruiken we het eenvoudig om de update te activeren door een dummy-statusvariabele bij te werken, x. De status moet daadwerkelijk veranderen om de update te activeren, daarom wordt deze bij elke oproep verhoogd.

Gebruik de useState haak

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>
    );
}

Het idee achter dit type force-update lijkt erg op: useReducer in die zin dat we de status voortdurend bijwerken om de verandering te forceren. In plaats van een teller te verhogen, zoals we deden bij de laatste methode, schakelen we hier eenvoudig een booleaanse waarde in, zodat deze bij elke aanroep wordt genegeerd.

De useState en useCallback haken

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>
    );
}

Nogmaals, deze strategie werkt door de staat te veranderen. In dit geval, hoewel we technisch gezien geen wijzigingen aanbrengen in de waarde van de staat, wij zijn het verzenden van een nieuw object, dat door React als nieuw wordt beschouwd, omdat het geen "diepe" gelijkheidscontroles op de staat uitvoert.

Zoals je kunt zien, zijn er een aantal manieren om hier hetzelfde te bereiken. Houd er rekening mee dat dit allemaal technisch tegengestelde patronen zijn en waar mogelijk moeten worden vermeden. Maar als u het onderliggende probleem niet kunt oplossen en een onderdeel geforceerd moet bijwerken, dan zouden alle methoden die we hier hebben laten zien moeten werken.

Conclusie

In dit artikel hebben we gezien hoe je updates op React-componenten kunt forceren. We hebben ook gezien hoe dit kan worden bereikt in zowel functionele als op klassen gebaseerde componenten. Hoewel dit niet per se een goede gewoonte is, is het handig om te begrijpen hoe het werkt voor het geval we het in speciale gevallen moeten gebruiken.