Jak wymusić aktualizację komponentu React

Wprowadzenie

W tym artykule pokażemy, jak wymusić aktualizację komponentu w React.js. Dokładniej, przedstawimy krótkie wprowadzenie do ponownego renderowania Reacta, pokażemy, jak wymusić aktualizacje w komponentach opartych na klasach i jak wymusić aktualizacje w komponentach funkcjonalnych.

Ponowne renderowanie reakcji

W większości przypadków React sam automatycznie obsługuje ponowne renderowanie komponentów. Przyczyna tego może być oparta na tym, kiedy właściwości lub stan zostały zaktualizowane. Tak więc, gdy zmieni się stan lub właściwość, komponent jest ponownie renderowany. Ale co, jeśli twój komponent jest zależny od czegoś innego, a niekoniecznie od twojego stanu lub własności? W takim przypadku może być konieczne wymuszenie aktualizacji komponentu, ponieważ React mógł nie wykryć zmiany.

Przyjrzyjmy się, jak wykorzystać tę wymuszoną aktualizację w komponencie React. Aby to pokazać, stworzymy prostą aplikację do celów demonstracyjnych.

Note: Omówimy kilka koncepcji Reacta, więc wskazane jest posiadanie podstawowej wiedzy na temat Reacta.

Wymuszanie aktualizacji komponentów opartych na klasach

Komponent klasy ma wbudowaną metodę ponownego renderowania komponentu, zwaną forceUpdate(), który służy do wymuszenia ponownego renderowania komponentu. Możesz przeczytać więcej o forceUpdate() metoda na React oficjalna strona internetowa.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Note: Nie zaleca się polegania na aktualizowaniu komponentów za pomocą forceUpdate() metoda. Kiedy okaże się, że potrzebujesz tej metody, powinieneś najpierw spróbować przeanalizować swój kod i dowiedzieć się, czy istnieje inny powód, dla którego React nie aktualizuje komponentu. Może się okazać, że przyczyną tego jest błąd lub że możesz zmienić strukturę kodu w sposób, który pozwoli Reactowi na poprawne ponowne renderowanie komponentu samodzielnie.

Oto przykład, jak wymusić aktualizację komponentu opartego na klasie:

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

W tej metodzie dzieje się o wiele więcej, niż mogłoby się wydawać. Na przykład dzwonienie forceUpdate() wyzwala również metody cyklu życia komponentów podrzędnych. A jak wiemy z React, zaktualizuje DOM tylko wtedy, gdy znacznik rzeczywiście się zmienił.

Możesz uzyskać dostęp do kod na żywo tutaj.

Wymuszanie aktualizacji komponentów funkcjonalnych

Komponenty funkcjonalne nie mają wbudowanej metody ponownego renderowania komponentów, tak jak robią to ich odpowiedniki oparte na klasach. Oznacza to, że nie mamy forceUpdate() dostępna dla nas metoda. Pamiętaj jednak, że w React komponenty są zazwyczaj ponownie renderowane ze względu na zmiany stanu lub właściwości. Korzystając z tego, możemy osiągnąć sposoby na wymuszenie aktualizacji.

Od wersji 16.8+ React posiada koncepcję zwaną hookami, która może być używana w komponentach funkcjonalnych do aktualizowania stanu, wykonywania efektów ubocznych itp. Użyjemy tych hooków na naszą korzyść, aby uzyskać komponent do ponownego renderowania.

Oto kilka przykładów, jak wymusić aktualizację w komponencie funkcjonalnym:

Korzystanie z useReducer hak

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

function handleClick() {
    forceUpdate();
}

Reduktor w React jest zwykle używany, gdy masz złożoną logikę stanu i akcje. Tutaj używamy go po prostu do wyzwolenia aktualizacji poprzez aktualizację fikcyjnej zmiennej stanu, x. Stan musi się zmienić, aby wyzwolić aktualizację, dlatego jest zwiększany przy każdym wywołaniu.

Użyj useState hak

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

Idea tego typu wymuszonej aktualizacji jest bardzo podobna do: useReducer w tym, że stale aktualizujemy stan, aby wymusić zmianę. Zamiast zwiększać licznik, jak to zrobiliśmy w ostatniej metodzie, tutaj po prostu przełączamy wartość logiczną, aby była negowana przy każdym wywołaniu.

Korzystanie z useState i useCallback haczyki

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

Ponownie, ta strategia działa poprzez zmianę stanu. W tym przypadku, chociaż technicznie nie zmieniamy wartość państwa, my jest wysłanie mu nowego obiektu, który React jest uważany za nowy, ponieważ nie wykonuje „głębokich” kontroli równości w stanie.

Jak widać, istnieje wiele sposobów na osiągnięcie tego samego celu. Należy pamiętać, że z technicznego punktu widzenia są to anty-wzorce i należy ich unikać, gdy tylko jest to możliwe. Ale jeśli nie możesz rozwiązać podstawowego problemu i musisz wymusić aktualizację składnika, każda z przedstawionych tutaj metod powinna działać.

Wnioski

W tym artykule zobaczyliśmy, jak wymusić aktualizacje na komponentach React. Zobaczyliśmy również, jak można to osiągnąć zarówno w komponentach funkcjonalnych, jak i klasowych. Chociaż niekoniecznie jest to dobra praktyka, warto zrozumieć, jak to działa na wypadek, gdybyśmy musieli z niej korzystać w szczególnych przypadkach.