Abdelrahman Mostafa10 نشر 29 نوفمبر 2023 أرسل تقرير مشاركة نشر 29 نوفمبر 2023 (معدل) ما زلت أحاول تعلم React.js، واجهتني مشكلة عند تحديث الحالة الخاصة بالمكونات، فعندما أقوم بتحديث حالة المكون باستمرار، يبدوا أن React يعيد تقييم المكون بأكمله بدلاً من إعادة تقييم الجزء الذي تغيرت فيه الحالة. الكود: import React, { useState } from 'react'; const MyComponent = () => { const [count, setCount] = useState(0); const handleIncrement = () => { setCount(count + 1); }; return ( <div> <p>العدد: {count}</p> <button onClick={handleIncrement}>زيادة</button> </div> ); }; export default MyComponent; عندما أقوم بالنقر على زر "زيادة"، يتم إعادة تقييم المكون بأكمله، حتى إذا كان لدي عناصر أخرى في المكون، يبدوا أنها تتأثر أيضًا. كيف يمكنني تحسين ذلك وتجنب إعادة التقييم الزائد؟ تم التعديل في 29 نوفمبر 2023 بواسطة Abdelrahman Mostafa10 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmed Elmrsawy نشر 30 نوفمبر 2023 أرسل تقرير مشاركة نشر 30 نوفمبر 2023 في react عند تغيير الstate يتم عمل rerender للcomponent كامل ولكن للحد من تلك المشكلة يتم اللجوء لإستخدام حلول مثل useMemo حيث أنة يتم تقسيم الكود الي components أصغر و تستعمل useMemo لإخبار react أن ذلك الcomponent لن يحدث له rerender الا في حالة تغير الstates الموجودة في قائمة الإعتمادات أو الarray of dependencies و أيضا استعمال useCallBack لعدم تعريف الfunction من جديد في كل مرة يتم فيها عمل rerender للcomponent import React, { useState } from 'react'; const DisplayCount = React.memo(({ count }) => { console.log('Rendering DisplayCount'); return <p>العدد: {count}</p>; }); const MyComponent = () => { const [count, setCount] = useState(0); const handleIncrement = React.useCallBack(()=>{ setCount(count + 1); },[setCount,count]) return ( <div> <DisplayCount count={count} /> <button onClick={handleIncrement}>زيادة</button> </div> ); }; export default MyComponent; اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد سعد شحرور نشر 3 ديسمبر 2023 أرسل تقرير مشاركة نشر 3 ديسمبر 2023 في الحقيقة، مشكلة اعادة تحميل ال component في react هي ليست مشكلة، بل هي أمر متضمن بالمكتبة وينفذ by default في حالات معينة (ليس دائما). مع ذلك، يمكنك تحديث الحالة بطريقة صحيحة لتجنب حدوث ذلك، وهذه هي الطريقة: const [count, setCount] = useState(0); // تحديث الحالة الخاطئ const handleIncrement = () => { setCount(count + 1); }; // تحديث الحالة الصحيح const handleIncrement = () => { setCount(prev => prev + 1) } ال prev هنا هو الحالة السابقة لل state، أي أن العداد يبدأ عند القيمة 0، وعند التحديث يقوم بجلب هذا ال 0 ويزيد فوقه المقدار 1، مما يمنع اعادة تحميل ال component كله. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Abdelrahman Mostafa10
ما زلت أحاول تعلم React.js، واجهتني مشكلة عند تحديث الحالة الخاصة بالمكونات، فعندما أقوم بتحديث حالة المكون باستمرار، يبدوا أن React يعيد تقييم المكون بأكمله بدلاً من إعادة تقييم الجزء الذي تغيرت فيه الحالة.
الكود:
عندما أقوم بالنقر على زر "زيادة"، يتم إعادة تقييم المكون بأكمله، حتى إذا كان لدي عناصر أخرى في المكون، يبدوا أنها تتأثر أيضًا.
كيف يمكنني تحسين ذلك وتجنب إعادة التقييم الزائد؟
تم التعديل في بواسطة Abdelrahman Mostafa10رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.