A React komponens frissítésének kényszerítése

Bevezetés

In this article we’ll show you how to force update a component in React.js. More specifically, we’ll be giving a brief introduction to React re-renders, we’ll show how to force updates in class-based components, and how to force updates in functional components.

Reakció Re-renderek

A legtöbb esetben maga a React automatikusan kezeli az újrarenderelő összetevőket. Ennek oka lehet, hogy mikor frissítették a kellékeket vagy az állapotot. Tehát amikor egy állapot vagy tulajdonság megváltozik, az összetevő újra megjelenik. De mi van akkor, ha az alkatrésze valami mástól függ, és nem feltétlenül az Ön állapotától vagy tulajdonától? Ebben az esetben előfordulhat, hogy kényszeríteni kell az összetevő frissítését, mivel a React nem észlelte a változást.

Let’s take a look at how to use this forced update on a React component. To show this, we’re going to create a simple application for demo purposes.

Megjegyzések: A React néhány fogalmával foglalkozunk, ezért ajánlatos a React alapismerete.

Frissítések kényszerítése az osztályalapú összetevőkre

Az osztálykomponensnek van egy beépített metódusa egy komponens újrarenderelésére, ún forceUpdate(), amely arra szolgál, hogy egy komponenst újra rendereljen. Bővebben olvashatsz a forceUpdate() method on React’s hivatalos honlapján.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Megjegyzések: Nem tanácsos az összetevők frissítésére hagyatkozni a forceUpdate() módszer. Ha úgy találja, hogy szüksége van erre a módszerre, először meg kell próbálnia elemezni a kódot, és kideríteni, hogy van-e más oka annak, hogy a React nem frissíti az összetevőt. Előfordulhat, hogy egy hiba okozza ezt, vagy átstrukturálhatja a kódot oly módon, hogy lehetővé tegye a React számára, hogy megfelelően újra renderelje az összetevőt.

Íme egy példa arra, hogyan kényszeríthet frissítést egy osztályalapú összetevőre:

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

There’s a lot more going on within this method than it may seem. For example, calling forceUpdate() triggers the lifecycle methods for the child components as well. And as we know with React, it’ll update the DOM only if the markup has actually changed.

Hozzáférhet a élő kód itt.

Frissítések kényszerítése a funkcionális komponensekre

Functional components have no built-in method for re-rending a components like their class-based counterparts do. This means that we don’t have the forceUpdate() rendelkezésünkre álló módszer. Ne feledje azonban, hogy a React alkalmazásban az összetevők jellemzően újrarenderelődnek az állapot- vagy támasztékváltozások miatt. Ennek felhasználásával módokat érhetünk el az upate kényszerítésében.

As of v16.8+, React has a concept called Hooks which can be used in functional components for updating state, performing side-effects, etc. We’ll use these hooks to our advantage in getting a component to re-render.

Íme néhány példa arra, hogyan kényszeríthet frissítést egy funkcionális összetevőben:

az useReducer horog

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

function handleClick() {
    forceUpdate();
}

A React reduktorát általában akkor használják, ha összetett állapotlogikával és műveletekkel rendelkezik. Itt egyszerűen a frissítés elindítására használjuk egy álállapot-változó frissítésével, x. The state must actually change in order to trigger the update, which is why it’s incremented on each call.

Használja a useState horog

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

Az ilyen típusú erőfrissítés mögött meghúzódó ötlet nagyon hasonló a useReducer abban, hogy folyamatosan frissítjük az állapotot, hogy kikényszerítsük a változást. A számláló növelése helyett, mint az előző módszerben, itt egyszerűen átkapcsolunk egy logikai értéket, hogy az minden hívásnál negálódjon.

az useState és a useCallback horgok

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

Again, this strategy works by changing the state. In this case, although we’re not technically changing the érték az államé, mi faliórái sending it a new object, which is considered new by React since it doesn’t do “deep” equality checks on state.

As you can see, there are a number of ways to achieve the same thing here. Keep in mind that these are all technically anti-patterns and should be avoided when possible. But if you’re not able to resolve the underlying issue and need to force update a component, then any of the methods we’ve shown here should work.

Következtetés

Ebben a cikkben láthattuk, hogyan kényszerítheti ki a React összetevőinek frissítését. Azt is láttuk, hogy ez hogyan érhető el mind a funkcionális, mind az osztályalapú komponensekben. Bár nem feltétlenül jó gyakorlat, hasznos megérteni, hogyan működik, arra az esetre, ha speciális esetekben használnunk kell.