كيفية فرض تحديث مكون رد الفعل

المُقدّمة

سنشرح لك في هذه المقالة كيفية فرض تحديث مكون في React.js. بشكل أكثر تحديدًا ، سنقدم مقدمة موجزة لإعادة تصيير React ، وسنعرض كيفية فرض التحديثات في المكونات المستندة إلى الفصل ، وكيفية فرض التحديثات في المكونات الوظيفية.

رد فعل يعيد تصيير

تتعامل 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. لقد رأينا أيضًا كيف يمكن تحقيق ذلك في كل من المكونات الوظيفية والمكونات الطبقية. في حين أنه ليس بالضرورة ممارسة جيدة ، إلا أنه من المفيد فهم كيفية عملها في حال احتجنا إلى استخدامها في حالات خاصة.