Bir React Bileşenini Güncellemeye Zorlama

Giriş

Bu makalede, React.js'de bir bileşeni güncellemeye zorlamayı göstereceğiz. Daha spesifik olarak, React yeniden oluşturma işlemlerine kısa bir giriş yapacağız, sınıf tabanlı bileşenlerde güncellemelerin nasıl zorlanacağını ve fonksiyonel bileşenlerde güncellemelerin nasıl zorunlu tutulacağını göstereceğiz.

React Yeniden Oluşturma

React, çoğu durumda bileşenleri sizin için otomatik olarak yeniden işler. Bunun nedeni, sahne veya durumun ne zaman güncellendiğine bağlı olabilir. Bu nedenle, bir durum veya özellik değiştiğinde bileşen yeniden oluşturulur. Ama ya bileşeniniz başka bir şeye bağımlıysa ve mutlaka sizin durumunuza veya mülkünüze bağlı değilse? Bu durumda, React değişikliği algılamamış olabileceğinden, bileşeni güncellemeye zorlamanız gerekebilir.

Bu zorunlu güncellemenin bir React bileşeni üzerinde nasıl kullanılacağına bir göz atalım. Bunu göstermek için demo amaçlı basit bir uygulama oluşturacağız.

not: Birkaç React kavramını ele alacağız, bu nedenle temel React bilgisine sahip olmanız önerilir.

Sınıf Tabanlı Bileşenlerde Güncellemeleri Zorlamak

Sınıf bileşeni, bir bileşeni yeniden işlemek için yerleşik bir yönteme sahiptir. forceUpdate(), bir bileşeni yeniden oluşturmaya zorlamak için kullanılır. hakkında daha fazlasını okuyabilirsiniz. forceUpdate() React'teki yöntem resmi internet sitesi.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

not: Bileşenleri kullanarak güncellemeye güvenmek tavsiye edilmez. forceUpdate() yöntem. Kendinizi bu yönteme ihtiyaç duyduğunuzu fark ettiğinizde, önce kodunuzu analiz etmeye çalışmalı ve React'in bileşeni güncellememesinin başka bir nedeni olup olmadığını bulmalısınız. Buna bir hatanın neden olduğunu görebilir veya kodunuzu, React'in bileşeni kendi başına düzgün bir şekilde yeniden oluşturmasını sağlayacak şekilde yeniden yapılandırabilirsiniz.

Sınıf tabanlı bir bileşende güncellemenin nasıl zorlanacağına dair bir örnek:

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

Bu yöntemde göründüğünden çok daha fazlası var. Örneğin, arama forceUpdate() alt bileşenler için de yaşam döngüsü yöntemlerini tetikler. Ve React ile bildiğimiz gibi, yalnızca biçimlendirme gerçekten değiştiyse DOM'yi güncelleyecektir.

Erişebilirsiniz. canlı kod burada.

İşlevsel Bileşenlerde Güncellemeleri Zorlamak

İşlevsel bileşenlerin, sınıf tabanlı benzerlerinin yaptığı gibi bir bileşeni yeniden işlemek için yerleşik bir yöntemi yoktur. Bu, sahip olmadığımız anlamına gelir forceUpdate() elimizdeki yöntem. Ancak, React bileşenlerinde durum veya prop değişiklikleri nedeniyle tipik olarak yeniden oluşturulduğunu hatırlayın. Bunu kullanarak, upate'i zorlamanın yollarını bulabiliriz.

v16.8+'dan itibaren, React, durumu güncellemek, yan etkileri gerçekleştirmek vb. için işlevsel bileşenlerde kullanılabilen Hooks adlı bir konsepte sahiptir. Bu kancaları, bir bileşeni yeniden oluşturmak için kendi avantajımıza kullanacağız.

İşlevsel bir bileşende bir güncellemenin nasıl zorlanacağına ilişkin bazı örnekler:

Kullanma useReducer kanca

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

function handleClick() {
    forceUpdate();
}

React'teki bir indirgeyici, genellikle karmaşık durum mantığına ve eylemlerine sahip olduğunuzda kullanılır. Burada, kukla bir durum değişkenini güncelleyerek güncellemeyi tetiklemek için kullanıyoruz, x. Güncellemeyi tetiklemek için durum gerçekten değişmelidir, bu nedenle her çağrıda artırılır.

Kullan useState kanca

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

Bu tür bir kuvvet güncellemesinin arkasındaki fikir şuna çok benzer: useReducer bu durumda, değişikliği zorlamak için durumu sürekli güncelliyoruz. Son yöntemde yaptığımız gibi bir sayacı artırmak yerine, burada her çağrıda olumsuzlanması için bir boole değerini değiştiririz.

Kullanma useState ve useCallback kancalar

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

Yine, bu strateji durumu değiştirerek çalışır. Bu durumda, teknik olarak değiştirmesek de değer devletin, biz vardır durum üzerinde “derin” eşitlik kontrolleri yapmadığından React tarafından yeni kabul edilen yeni bir nesne göndermek.

Gördüğünüz gibi, burada aynı şeyi elde etmenin birkaç yolu var. Bunların hepsinin teknik olarak anti-kalıplar olduğunu ve mümkün olduğunda kaçınılması gerektiğini unutmayın. Ancak, temel sorunu çözemiyorsanız ve bir bileşeni güncellemeye zorlamanız gerekiyorsa, burada gösterdiğimiz yöntemlerden herhangi biri işe yarayacaktır.

Sonuç

Bu yazımızda React bileşenlerinde güncellemelerin nasıl zorlandığını gördük. Bunun hem işlevsel hem de sınıf tabanlı bileşenlerde nasıl başarılabileceğini de gördük. Mutlaka iyi bir uygulama olmasa da, özel durumlarda kullanmamız gerektiğinde nasıl çalıştığını anlamak yararlıdır.