Як примусово оновити компонент React

Вступ

У цій статті ми покажемо вам, як примусово оновити компонент у React.js. Точніше, ми дамо короткий вступ до React re-renders, ми покажемо, як примусово оновлювати компоненти на основі класу та як примусово оновлювати функціональні компоненти.

React Re-Renders

У більшості випадків React автоматично обробляє повторно рендеринг компонентів за вас. Причиною цього може бути те, коли реквізити або стан було оновлено. Отже, коли змінюється стан або властивість, компонент повторно рендериться. Але що, якщо ваш компонент залежить від чогось іншого і не обов’язково від вашого стану чи власності? У такому випадку вам може знадобитися примусове оновлення компонента, оскільки React може не виявити зміни.

Давайте розглянемо, як використовувати це примусове оновлення компонента React. Щоб показати це, ми збираємося створити просту програму для демонстраційних цілей.

примітки: Ми розглянемо кілька концепцій React, тому бажано мати базові знання React.

Примусове оновлення компонентів на основі класу

Компонент класу має вбудований метод для повторного відтворення компонента, який називається forceUpdate(), який використовується для примусового повторного відтворення компонента. Ви можете прочитати більше про forceUpdate() метод на React Офіційний сайт.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

примітки: Не рекомендується покладатися на оновлення компонентів за допомогою 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 є концепція під назвою Хуки, яку можна використовувати у функціональних компонентах для оновлення стану, виконання побічних ефектів тощо. Ми використовуватимемо ці хуки в наших інтересах, щоб повторно відобразити компонент.

Ось кілька прикладів того, як примусово оновити функціональний компонент:

Використання 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 у тому, що ми постійно оновлюємо стан, щоб змусити зміни. Замість збільшення лічильника, як ми робили в останньому методі, тут ми просто перемикаємо логічне значення так, щоб воно відмінювалося під час кожного виклику.

Використання 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>
    );
}

Знову ж таки, ця стратегія працює шляхом зміни стану. У цьому випадку, хоча технічно ми не змінюємо значення держави, ми він має надсилаючи йому новий об’єкт, який React вважає новим, оскільки він не виконує «глибокі» перевірки рівності стану.

Як бачите, тут є кілька способів досягти того самого. Майте на увазі, що всі ці технічно антишаблони, і їх слід уникати, коли це можливо. Але якщо ви не можете вирішити основну проблему і вам потрібно примусово оновити компонент, будь-який із наведених тут методів має працювати.

Висновок

У цій статті ми побачили, як примусово оновлювати компоненти React. Ми також побачили, як цього можна досягти у функціональних і класових компонентах. Хоча це не обов’язково хороша практика, корисно зрозуміти, як це працює, якщо нам потрібно використовувати його в особливих випадках.