شرح صفوف ومحتوى الفقرة
يحيط غلاف Error Boundary بالأقسام المستقلة في شاشتك—كمخطط الأسهم أو قسم التعليقات أو المكونات الكسولة—ليعرض بطاقة بديلة آمنة مع زر إعادة المحاولة عند تعطل ذلك القسم وحده، بينما تواصل بقية الصفحة عملها دون انقطاع.
انتبه لحقيقة معمارية خاصة في React الحديثة: تُعد حدود الأخطاء الاستثناء المعماري الوحيد الذي لا يزال يعتمد داخلياً على الدالة الثابتة getDerivedStateFromError ودالة التسجيل componentDidCatch لعدم توفر خطاف مكافئ لها بعد. وفي المشاريع العملية تكتب هذا الغلاف الصغير مرة واحدة فقط في ملف مساعد مشترك وتبقى جميع مكونات تطبيقك دوالَّ حديثة بنسبة 100%:
HTML
class ErrorBoundary extends Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
const { hasError } = this.state;
return hasError
? this.props.fallback
: this.props.children;
}
}