كيفية إدارة الحالة في رد فعل بكفاءة

إذا كنت قد كتبت الكثير من كود React ، فمن المحتمل أنك استخدمت الحالة بشكل غير صحيح. أحد الأخطاء الشائعة التي يرتكبها مطورو React هو تخزين الحالات عالميًا في التطبيق ، بدلاً من تخزينها في المكونات التي يتم استخدامها فيها.

تعرف على كيفية إعادة تشكيل الكود الخاص بك للاستفادة من الولاية المحلية ولماذا يعد القيام بذلك دائمًا فكرة جيدة.

مثال أساسي عن الحالة في React

هنا جدا تطبيق عداد بسيط يوضح كيفية التعامل مع الحالة عادةً في React:

يستورد {useState} من'تتفاعل'
يستورد {عداد} من'عداد'
وظيفةبرنامج(){
مقدار ثابت [count، setCount] = useState (0)
يعود<عدادعدد={عدد}setCount={setCount} />
}
يصدّرتقصير برنامج

في السطرين 1 و 2 ، تقوم باستيراد ملف useState () ربط لإنشاء الدولة ، و عداد عنصر. أنت تحدد ال عدد دولة و setCount طريقة لتحديث الدولة. ثم تقوم بتمرير كلاهما وصولا إلى عداد عنصر.

ال عداد ثم يعرض المكون ملف عدد والمكالمات setCount لزيادة العدد وإنقاصه.

وظيفةعداد({عدد ، setCount}) 





instagram viewer
{
يعود (


 setCount (السابق => السابق - 1)}>-</button>
{عدد} </span>
 setCount (السابق => prev + 1)}>+</button>
 </div>
 )
}

أنت لم تحدد ال عدد متغير و setCount تعمل محليا داخل عداد عنصر. بدلاً من ذلك ، قمت بتمريره من المكون الرئيسي (برنامج). بعبارة أخرى ، أنت تستخدم حالة عالمية.

المشكلة مع الدول العالمية

تكمن مشكلة استخدام الحالة العامة في أنك تقوم بتخزين الحالة في مكون أصلي (أو أحد الوالدين) ثم بعد ذلك تمريرها كدعائم إلى المكون حيث تكون هذه الحالة مطلوبة بالفعل.

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

نقل الدولة إلى المكون الطفل

عندما تنقل الدولة إلى عداد المكون ، سيبدو كالتالي:

يستورد {useState} من'تتفاعل'
وظيفةعداد() {
مقدار ثابت [count، setCount] = useState (0)
يعود (


 setCount (السابق => السابق - 1)}>-</button>
{عدد} </span>
 setCount (السابق => prev + 1)}>+</button>
 </div>
 )
}

ثم داخل ملف برنامج المكون ، ليس عليك تمرير أي شيء إلى ملف عداد عنصر:

// الواردات
وظيفةبرنامج(){
يعود<عداد />
}

سيعمل العداد تمامًا كما كان يعمل من قبل ، ولكن الاختلاف الكبير هو أن جميع حالاتك موجودة محليًا داخل هذا العداد عداد عنصر. لذلك إذا كنت بحاجة إلى عداد آخر على الصفحة الرئيسية ، فسيكون لديك عدادان مستقلان. كل عداد مستقل بذاته ويهتم بكل حالته الخاصة.

معالجة الحالة في تطبيقات أكثر تعقيدًا

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

يستورد {useState} من"تتفاعل";
يستورد { نموذج تسجيل الدخول } من"./نموذج تسجيل الدخول";
وظيفةبرنامج() {
مقدار ثابت [formData، setFormData] = useState ({
 بريد إلكتروني: "",
 كلمة المرور: "",
 });
وظيفةupdateFormData(بيانات جديدة) {
 setFormData ((السابق) => {
يعود {... prev،... newData}؛
 });
 }
وظيفةعند تقديم() {
وحدة التحكم.log (formData) ؛
 }
يعود (
 البيانات = {formData}
 updateData = {updateFormData}
 onSubmit = {onSubmit}
 />
 );
}

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

وظيفةنموذج تسجيل الدخول({onSubmit، data، updateData}) {
وظيفةمقبض(ه) {
 e.preventDefault () ؛
 عند تقديم()؛
 }
يعود (


"بريد إلكتروني"> البريد الإلكتروني/label>
 اكتب ="بريد إلكتروني"
 معرف ="بريد إلكتروني"
 القيمة = {data.email}
 onChange = {(e) => updateData ({ بريد إلكتروني: e.target.value})}
 />
"كلمة المرور"> كلمة المرور </label>
 اكتب ="كلمة المرور"
 معرف ="كلمة المرور"
 القيمة = {data.password}
 onChange = {(e) => updateData ({ كلمة المرور: e.target.value})}
 />
"يُقدِّم"> إرسال </button>
 </form>
 );
}

بدلاً من إدارة الحالة على المكون الأصلي ، من الأفضل نقل الدولة إلى تسجيل الدخول، حيث ستستخدم الرمز. يؤدي القيام بذلك إلى جعل كل مكون مستقل بذاته ولا يعتمد على مكون آخر (مثل الأصل) للحصول على البيانات. ها هي النسخة المعدلة من نموذج تسجيل الدخول:

يستورد {useRef} من"تتفاعل";
وظيفةنموذج تسجيل الدخول({ عند تقديم }) {
مقدار ثابت emailRef = useRef () ،
مقدار ثابت passwordRef = useRef () ،

وظيفةمقبض(ه) {
 e.preventDefault () ؛
 عند تقديم({
 البريد الإلكتروني: emailRef.current.value ،
 كلمة المرور: passwordRef.current.value ،
 });
 }
يعود (


"بريد إلكتروني"> البريد الإلكتروني/label>
"بريد إلكتروني" معرف ="بريد إلكتروني" المرجع = {emailRef} />
"كلمة المرور"> كلمة المرور </label>
"كلمة المرور" معرف ="كلمة المرور" المرجع = {passwordRef} />
"يُقدِّم"> إرسال </button>
 </form>
 );
}

هنا تقوم بربط المدخلات بالمتغير باستخدام المرجع سمات و استخدم رد فعل هوك ، بدلا من تمرير طرق التحديث مباشرة. يساعدك هذا في إزالة التعليمات البرمجية المطولة و تحسين أداء النموذج باستخدام خطاف useRef.

في المكون الرئيسي (App.js) ، يمكنك إزالة كل من الحالة العالمية و updateFormData () الطريقة لأنك لم تعد بحاجة إليها. الوظيفة الوحيدة المتبقية هي عند تقديم()، والتي تستدعيها من داخل نموذج تسجيل الدخول مكون لتسجيل تفاصيل تسجيل الدخول على وحدة التحكم.

وظيفةبرنامج() {
وظيفةعند تقديم(بيانات النموذج) {
وحدة التحكم.log (formData) ؛
 }
يعود (
 البيانات = {formData}
 updateData = {updateFormData}
 onSubmit = {onSubmit}
 />
 );
}

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

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

التعامل مع الدولة المشتركة

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

مثال على ذلك هو وجود ملف TodoContainer المكون الرئيسي المكون من عنصرين فرعيين: عمل قائمة و TodoCount.

وظيفةTodoContainer() {
مقدار ثابت [todos، setTodos] = useState ([])
يعود (
 <>


 </>
 )
}

يتطلب كلا المكونين التابعين تودوس الدولة ، لذلك TodoContainer يمررها لكليهما. في مثل هذه السيناريوهات ، عليك أن تجعل الدولة محلية قدر الإمكان. في المثال أعلاه ، وضعه داخل ملف تودوس محلي بقدر ما يمكنك الحصول عليه.

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

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

تعرف على المزيد حول React Hooks

تشكل الخطافات أساس React. باستخدام الخطافات في React ، يمكنك تجنب كتابة تعليمات برمجية طويلة قد تستخدم الفئات بخلاف ذلك. يعتبر الخطاف useState () بلا جدال هو خطاف React الأكثر استخدامًا ، ولكن هناك العديد من العناصر الأخرى مثل useEffect () و useRef () و useContext ().

إذا كنت تريد أن تصبح بارعًا في تطوير التطبيقات باستخدام React ، فأنت بحاجة إلى معرفة كيفية استخدام هذه الروابط في تطبيقك.