Kuidas sundida Reacti komponenti värskendama

Sissejuhatus

Selles artiklis näitame teile, kuidas sundida React.js-i komponenti värskendama. Täpsemalt tutvustame lühidalt Reacti uuesti renderdusi, näitame, kuidas sundida värskendusi klassipõhistes komponentides ja kuidas sundida värskendusi funktsionaalsetes komponentides.

Reage Re-render

Enamikul juhtudel haldab React ise komponentide ümberrenderdamist teie eest automaatselt. Selle põhjuseks võib olla rekvisiitide või oleku värskendamine. Seega, kui olek või omadus muutub, renderdatakse komponent uuesti. Aga mis siis, kui teie komponent sõltub millestki muust ja mitte tingimata teie riigist või omandist? Sel juhul peate võib-olla sundima komponenti värskendama, kuna React ei pruugi muudatust tuvastada.

Vaatame, kuidas seda sunnitud värskendust Reacti komponendil kasutada. Selle näitamiseks loome demo jaoks lihtsa rakenduse.

märkused: käsitleme mõnda Reacti mõistet, seega on soovitatav omada Reacti põhiteadmisi.

Värskenduste sundimine klassipõhistele komponentidele

Klassi komponendil on sisseehitatud meetod komponendi uuesti renderdamiseks, nn forceUpdate(), mida kasutatakse komponendi sundimiseks uuesti renderdama. Lisateavet saate lugeda forceUpdate() meetodit Reactis ametlikul kodulehel.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

märkused: Ei ole soovitatav tugineda komponentide värskendamisele, kasutades forceUpdate() meetod. Kui leiate, et vajate seda meetodit, peaksite esmalt proovima oma koodi analüüsida ja välja selgitama, kas on mõni muu põhjus, miks React komponenti ei värskenda. Võite avastada, et selle põhjustab viga või saate oma koodi ümber struktureerida viisil, mis võimaldab Reactil komponendi iseseisvalt korralikult ümber renderdada.

Siin on näide klassipõhise komponendi värskenduse sundimise kohta:

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

Selle meetodi raames toimub palju rohkem, kui võib tunduda. Näiteks helistades forceUpdate() käivitab ka alamkomponentide elutsükli meetodid. Ja nagu me Reactiga teame, värskendab see DOM-i ainult siis, kui märgistus on tegelikult muutunud.

Saate pääseb juurde reaalajas kood siin.

Funktsionaalsete komponentide värskenduste sundimine

Funktsionaalsetel komponentidel pole sisseehitatud meetodit komponentide uuesti renderdamiseks, nagu seda teevad nende klassipõhised kolleegid. See tähendab, et meil ei ole forceUpdate() meile kättesaadav meetod. Kuid pidage meeles, et rakenduses React renderdatakse komponendid tavaliselt oleku või rekvisiidi muutuste tõttu uuesti. Seda kasutades saame saavutada viise upate sundimiseks.

Alates versioonist 16.8+ on Reactil kontseptsioon nimega Hooks, mida saab kasutada funktsionaalsetes komponentides oleku värskendamiseks, kõrvalmõjude tegemiseks jne. Kasutame neid konkse komponendi uuesti renderdamiseks oma eeliseks.

Siin on mõned näited, kuidas sundida funktsionaalse komponendi värskendust.

kasutades useReducer konks

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

function handleClick() {
    forceUpdate();
}

Reacti reduktorit kasutatakse tavaliselt siis, kui teil on keeruline olekuloogika ja toimingud. Siin kasutame seda lihtsalt värskenduse käivitamiseks näiva olekumuutuja värskendamisega, x. Värskenduse käivitamiseks peab olek tegelikult muutuma, mistõttu seda suurendatakse iga kõne korral.

Kasuta useState konks

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

Seda tüüpi jõuvärskenduse idee on väga sarnane useReducer selles, et värskendame muudatuse sundimiseks pidevalt olekut. Selle asemel, et loendurit suurendada, nagu tegime eelmises meetodis, lülitame siin lihtsalt tõeväärtuse sisse, nii et see eitatakse iga kõne korral.

kasutades useState ja useCallback konksud

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

Jällegi toimib see strateegia riiki muutes. Sel juhul, kuigi me ei muuda seda tehniliselt väärtus riigi, meie See on saadab sellele uue objekti, mida React peab uueks, kuna see ei tee oleku "sügavat" võrdsuse kontrolli.

Nagu näete, on siin sama eesmärgi saavutamiseks mitmeid viise. Pidage meeles, et need kõik on tehniliselt mustritevastased ja neid tuleks võimalusel vältida. Kuid kui te ei saa probleemi aluseks olevat probleemi lahendada ja peate sundima komponenti värskendama, peaks kõik siin näidatud meetodid toimima.

Järeldus

Selles artiklis oleme näinud, kuidas Reacti komponentide värskendusi sundida. Samuti nägime, kuidas seda on võimalik saavutada nii funktsionaalsetes kui ka klassipõhistes komponentides. Kuigi see ei pruugi olla hea tava, on kasulik mõista, kuidas see toimib, juhuks, kui peame seda erijuhtudel kasutama.