چگونه یک کامپوننت React را به اجبار به روز کنیم

معرفی

در این مقاله به شما نشان خواهیم داد که چگونه یک کامپوننت را در React.js اجباری به روز کنید. به طور خاص، مقدمه‌ای مختصر برای رندرهای React ارائه می‌کنیم، نحوه به‌روزرسانی اجباری در مؤلفه‌های مبتنی بر کلاس و نحوه به‌روزرسانی اجباری در مؤلفه‌های عملکردی را نشان خواهیم داد.

React Re-Renders

خود React در بیشتر موارد به طور خودکار مولفه‌های رندر مجدد را برای شما مدیریت می‌کند. دلیل این امر می تواند بر اساس زمانی باشد که props یا state به روز شده است. بنابراین هنگامی که یک حالت یا ویژگی تغییر می کند، کامپوننت دوباره رندر می شود. اما اگر جزء شما به چیز دیگری وابسته باشد نه لزوماً به دولت یا دارایی شما چه؟ در این صورت ممکن است لازم باشد کامپوننت را به اجبار به روز کنید زیرا React ممکن است این تغییر را شناسایی نکرده باشد.

بیایید نگاهی به نحوه استفاده از این به‌روزرسانی اجباری در یک مؤلفه React بیندازیم. برای نشان دادن این موضوع، قصد داریم یک برنامه کاربردی ساده برای اهداف نمایشی ایجاد کنیم.

توجه داشته باشید: ما چند مفهوم React را پوشش خواهیم داد، بنابراین داشتن دانش اولیه از React توصیه می شود.

اجبار به‌روزرسانی‌ها در مؤلفه‌های مبتنی بر کلاس

کامپوننت کلاس دارای یک متد داخلی برای رنینگ مجدد یک جزء است که نامیده می شود forceUpdate()، که برای وادار کردن یک جزء به رندر مجدد استفاده می شود. می توانید در مورد آن بیشتر بخوانید forceUpdate() روش روی React's وب سایت رسمی.

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 مفهومی به نام Hooks دارد که می‌تواند در کامپوننت‌های کاربردی برای به‌روزرسانی وضعیت، انجام عوارض جانبی و غیره استفاده شود.

در اینجا چند نمونه از نحوه اجباری به روز رسانی در یک مؤلفه عملکردی آورده شده است:

با استفاده از 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 را دیدیم. ما همچنین دیدیم که چگونه می توان به این امر در هر دو مؤلفه عملکردی و مبتنی بر کلاس دست یافت. اگرچه لزوماً تمرین خوبی نیست، اما درک نحوه عملکرد آن در مواردی که نیاز به استفاده از آن در موارد خاص داریم مفید است.