رد عمل کے اجزاء کو اپ ڈیٹ کرنے کا طریقہ

تعارف

اس مضمون میں ہم آپ کو دکھائیں گے کہ React.js میں کسی جزو کو زبردستی اپ ڈیٹ کرنے کا طریقہ۔ مزید خاص طور پر، ہم React ری رینڈرز کا ایک مختصر تعارف پیش کریں گے، ہم دکھائیں گے کہ کلاس پر مبنی اجزاء میں اپ ڈیٹس کو کس طرح مجبور کیا جائے، اور فنکشنل اجزاء میں اپ ڈیٹس کو کس طرح مجبور کیا جائے۔

ری ایکٹ ری رینڈرز

React خود بخود آپ کے لیے ری رینڈرنگ اجزاء کو ہینڈل کرتا ہے، زیادہ تر معاملات میں۔ اس کی وجہ اس پر مبنی ہو سکتی ہے جب پرپس یا اسٹیٹ کو اپ ڈیٹ کیا گیا ہو۔ لہذا جب کوئی ریاست یا پراپرٹی تبدیل ہوتی ہے، تو جزو دوبارہ رینڈر ہوتا ہے۔ لیکن کیا ہوگا اگر آپ کا جزو کسی اور چیز پر منحصر ہے اور ضروری نہیں کہ آپ کی ریاست یا جائیداد پر ہو؟ اس صورت میں آپ کو جزو کو زبردستی اپ ڈیٹ کرنے کی ضرورت پڑسکتی ہے کیونکہ React نے تبدیلی کا پتہ نہیں لگایا ہوگا۔

آئیے اس پر ایک نظر ڈالتے ہیں کہ اس زبردستی اپ ڈیٹ کو React جزو پر کیسے استعمال کیا جائے۔ یہ دکھانے کے لیے، ہم ڈیمو مقاصد کے لیے ایک سادہ ایپلیکیشن بنانے جا رہے ہیں۔

نوٹ: ہم React کے چند تصورات کا احاطہ کریں گے، لہٰذا React کے بارے میں بنیادی معلومات رکھنے کا مشورہ دیا جاتا ہے۔

کلاس پر مبنی اجزاء پر زبردستی اپڈیٹس

کلاس جزو میں جزو کو دوبارہ رینڈ کرنے کا ایک بلٹ ان طریقہ ہے، جسے کہتے ہیں۔ forceUpdate()، جو کسی جزو کو دوبارہ رینڈر کرنے پر مجبور کرنے کے لیے استعمال ہوتا ہے۔ آپ کے بارے میں مزید پڑھ سکتے ہیں۔ forceUpdate() رد عمل کا طریقہ سرکاری ویب سائٹ.

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 اجزاء میں عام طور پر حالت یا سہارے کی تبدیلیوں کی وجہ سے دوبارہ پیش کیا جاتا ہے۔ اس کا استعمال کرتے ہوئے، ہم زبردستی اپیٹ کرنے کے طریقے حاصل کر سکتے ہیں۔

v16.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 اجزاء پر اپ ڈیٹس کو کیسے مجبور کیا جاتا ہے۔ ہم نے یہ بھی دیکھا کہ یہ فنکشنل اور کلاس پر مبنی اجزاء دونوں میں کیسے حاصل کیا جا سکتا ہے۔ اگرچہ ضروری نہیں کہ اچھی پریکٹس ہو، یہ سمجھنا مفید ہے کہ یہ کس طرح کام کرتا ہے اگر ہمیں اسے خاص معاملات میں استعمال کرنے کی ضرورت ہو۔