تكنولوجيا

كيفية استخدام الحالة في مكونات React الوظيفية – CloudSavvy IT

يمكن أن تحتوي مكونات React على “حالة” داخلية ، وهي مجموعة من أزواج المفتاح / القيمة التي تنتمي إلى المكون. عندما تتغير الحالة ، تعيد React تصيير المكوِّن. تاريخيًا ، لا يمكن استخدام الحالة إلا في مكونات الفصل. باستخدام الخطافات ، يمكنك أيضًا تطبيق الحالات على المكونات الوظيفية.

طريقة تقليدية

يحتوي مكون React على ملف state احتفظ بالممتلكات في حالتها.قدموا setState() الطريقة التي يمكنك استخدامها لتحديث الحالة لتشغيل إعادة التصيير.

class MyComponent extends React.Component 
 
    state = value: 1;
 
    this.updateState = () => this.setState(value: (this.state.value + 1));
 
    render() 
        return (
            <div>
                <p>this.state.value</p>
                <button onClick=this.updateStateIncrement Value</button>
            </div>
        );
    
 

في هذا المثال ، سيعرض النص الذي تم تقديمه دائمًا أرقامًا في حالة المكون. سيؤدي النقر فوق الزر إلى زيادة القيمة.

تحويل إلى مكونات وظيفية

سيكون من المثالي استخدام مثل هذا المكون البسيط وإعادة كتابته كمكون وظيفي. لهذا ، تحتاج إلى استخدام الخطاف useState (). تمت إضافة الخطافات في React 16.8 ؛ قبل هذا الإصدار ، لم تكن هناك آلية لإضافة الحالة إلى المكونات الوظيفية.

هذا هو مظهر المكونات المذكورة أعلاه كمكونات وظيفية:

import React, useState from "react";
 
const MyComponent = () => 
    const [value, setValue] = useState(1);
    return (
        <div>
            <p>value</p>
            <button onClick=() => setValue((value + 1))>Increment Value</button>
        </div>
    );
;

هذا أقصر وأسهل في القراءة من الأصل المستند إلى الفصل.على عكس مكونات الفصل ، لا يمكنك الوصول state سمات المثيل أو setState() طريقة. في حين أن، useState() تم استدعاؤه لتعيين الحالة والحصول على وظيفة برنامج التحديث.

تشريح الخطاف useState ()

الربط هو ميزة React التي تتيح لك “ربط” الوظائف بمكونات وظيفية.نظرًا لأن الوظيفة هي وظيفة خالصة وليس لها حالات ، فقد تم تنفيذها في الأصل كـ React.Component لا يمكن استخدام طرق الفصل مباشرة. تسمح لك الخطافات بإضافة هذه الوظائف إلى المكونات دون الحاجة إلى التحويل إلى فئات.

هذه useState() يعيّن الخطاف سمة حالة منفصلة. تقوم بإرجاع مصفوفة تحتوي على عنصرين: قيمة الحالة الحالية ، ودالة يمكن استدعاؤها بالقيمة الجديدة لتحديث الحالة.

في المثال ، نستخدم مهمة إتلاف المصفوفة لفك ضغط قيمة المصفوفة إلى متغير مسمى بوضوح.وفقًا للاتفاقية ، يجب أن تبدأ طريقة الواضع بـ set لأنه يحل محل setState() طريقة الفصل.

يتصل useState() نعلن متغير حالة ، value في مثالنا ، سيكون “محجوزًا” بين استدعاءات الوظائف.هذا يعني useState() إنه مضمون لإرجاع نفس القيمة في كل مرة يتم استدعاؤها في المكون. بمجرد إنهاء الوظيفة ، ستفقد أي قيم متغيرة أخرى ؛ تحافظ React على قيمة الحالة داخليًا لضمان إرجاع قيمة الحالة نفسها في كل مرة يتم فيها تشغيل الوظيفة.

تحديث البلد

وظيفة تحديث الحالة هي مجرد وظيفة عادية.يتم استخدامه ل onClick معالج لاستبدال قيمة الحالة الحالية. تضمن المعالجة الداخلية لقيم الحالة في React إعادة عرض المكوِّن الخاص بك لاحقًا. useState() سيتم توفير القيمة الجديدة ، مما يجعل تغيير الحالة ساري المفعول.

مقابل setState() مكون الفئة: محدث الحالة الوظيفية في حين أن البلد بينما setState() قم بإجراء دمج ضحل:

const [value, setValue] = useState(foo: "bar", test: example: "demo");
setValue(foo: "foobar");
// Results in foo: "foobar"
 
this.state = foo: "bar", test: example: "demo";
this.setState(foo: "foobar");
// Results in foo: "foobar", test: example: "demo";

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

const Checkbox = () => 
    const [checked, setChecked] = useState(false);
    const toggle = previous => !previous;
    return <input checked=checked onClick=() => setChecked(toggle) />;
;

يساعدك هذا في إعادة استخدام منطق التبديل في أماكن متعددة داخل المكون.

الافتراضات

شيء آخر يجب ملاحظته useState(). يقبل الخطاف نفسه معلمة تحدد القيمة الأولية لمتغير الحالة. في المثال أعلاه ، value سيتم تهيئته كـ 1. عندما لا تحدد قيمة ، undefined مستخدم.هذا هو نفس الإعداد state سمات المثيل في مكونات الفئة.

إذا قمت بتمرير وظيفة إلى useState()، سوف تسميها React وتستخدم القيمة المعادة كقيمة الحالة الأولية.

const MyComponent = () => 
    const initialState = () => 1;
    const [value, setValue] = useState(initialState);
;

تتيح هذه التقنية تهيئة الحالة “البطيئة”. لن يتم استدعاء هذه الوظيفة حتى تصبح React جاهزة بالفعل لضبط الحالة.

يمكن أن يضمن استخدام الدوال أيضًا أن يتم حساب قيمة الحالة الأولية مرة واحدة فقط. هذا مهم إذا تم تحديد أن الحالة الأولية تتطلب عمليات حسابية باهظة الثمن – إذا قمت بتمريرها مباشرة ، فسيتم حساب القيمة في كل مرة يتم فيها تقديم المكون ، وإذا قمت بتمرير مرجع إلى الوظيفة ، فسيتم حسابه مرة واحدة لـ التقديم الأول.

const MyComponent = () => 
    const doSomethingExpensive = () => 
        // ...
    
    const [value, setValue] = useState(doSomethingExpensive());
    const [value, setValue] = useState(doSomethingExpensive);
;

الاختلاف الدقيق ولكن المهم بين الاثنين useState() توضح المكالمة تحسين الأداء المحتمل. سينفذ السطر الأول عمليات باهظة الثمن على كل استدعاء تصيير ، حتى لو كان هذا زائدًا (لأن الحالة قد تمت تهيئتها بالفعل). هذا لن يحدث في الحالة الثانية.

استخدم قيم الحالة المتعددة

عند استخدام قيم حالة متعددة في مكون وظيفي واحد ، هناك خياران. يمكنك استعادة كائن واحد باستخدام تخزين الحالة إلى نظام فئة:

const MyComponent = () => 
    const [user, setUser] = useState(id: 1, username: "foobar");
;

تحتاج إلى التأكد من الاتصال setUser() مع المستخدمين المحدثين غرض. إن صيغة الانتشار ملائمة مثل استخدام مكونات الصنف:

setUser(...user, username: "example");

سيؤدي ذلك إلى إنشاء كائن جديد بالخصائص التالية: user.ثم قم بالتحديث username تمت استعادة السمة إلى قيمتها الجديدة.قم بإنشاء ملف الجديد الكائنات ، بدلاً من التغيير المباشر للكائنات الموجودة ، لذلك يمكن لتنسيق حالة React التعرف على التغييرات.

أو يمكنك الاتصال useState() قم بتعيين متغير حالة فريد لكل عنصر عدة مرات. عادة ما تكون هذه هي الطريقة المفضلة للمكونات الوظيفية. هذا يجعل من السهل تحديث قيم الحالة الفردية.

const MyComponent = () => 
    const [userId, setUserId] = useState(1);
    const [username, setUsername] = useState("foobar");
;

الآن ، السمات ذات الحالة لها متغيرات الحالة الخاصة بها ووظائف التحديث.

ختاما

تتفاعل useState() تسمح الخطافات للمكونات الوظيفية بالحالة ، مما يجعلها أكثر قوة. يمكنك تعيين قيمة أولية ، والتأكد من أن القيمة الحالية تظل كما هي بين عرضين ، واستخدام الوظيفة المتوفرة خصيصًا لتحديث الحالة.

المكونات الوظيفية ذات الحالة تكون بشكل عام أسرع من المكونات الوظيفية القائمة على الفئة.علاوة على ذلك ، يمكنهم جعل المحتوى الموجود في قاعدة البيانات الخاصة بك معروضًا بشكل أكثر وضوحًا كزوج state مع setState() تخلص من هذه المتغيرات واستخدم أسماء متغيرات واضحة. أخيرا، useState() يوفر المرونة ، مما يعني أنك لم تعد بحاجة إلى تحويل المكونات الوظيفية إلى مكونات فئة عندما تحتاج إلى حالة.

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى