تابع تعلم رياكت React الجزء 6
 |
| تعلم رياكت |
-35ما المقصود بالحكام المتقدمين Forward Refs ؟
إعادة توجيه المرجع هي ميزة تُستخدم لتمرير مرجع عبر مكون إلى أحد مكوناته الفرعية. يمكن إجراؤه باستخدام طريقة React.forwardRef (). إنه مفيد بشكل خاص مع المكونات ذات الترتيب الأعلى ويستخدم بشكل خاص في مكتبات المكونات القابلة لإعادة الاستخدام.
مثال
import React, { Component } from 'react';
import { render } from 'react-dom';
const TextInput = React.forwardRef((props, ref) => (
<input type="text" placeholder="Hello World" ref={ref} />
));
const inputRef = React.createRef();
class CustomTextInput extends React.Component {
handleSubmit = e => {
e.preventDefault();
console.log(inputRef.current.value);
};
render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<TextInput ref={inputRef} />
<button>Submit</button>
</form>
</div>
);
}
}
export default App;
-36 ما هو الخيار المفضل refs أو findDOMNode ()؟
الخيار المفضل هو استخدام مراجع رد الاتصال على واجهة برمجة تطبيقات findDOMNode (). لأن مرجعيات رد النداء تعطي تحكمًا أفضل عند ضبط المراجع وإلغاء ضبطها بينما تمنع findDOMNode () تحسينات معينة في React في المستقبل.
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this).scrollIntoView()
}
render() {
return <div />
}
}
النهج الموصى به هو:
class MyComponent extends Component {
componentDidMount() {
this.node.scrollIntoView()
}
render() {
return <div ref={node => this.node = node} />
}
}
class MyComponent extends Component {
componentDidMount() {
this.node.scrollIntoView()
}
render() {
return <div ref={node => this.node = node} />
}
}
-37 ما فائدة الحكام Refs ؟
يتم استخدام المرجع في React في الحالات التالية:
· يتم استخدامه لإرجاع مرجع للعنصر.
· يتم استخدامه عندما نحتاج إلى قياسات DOM مثل إدارة التركيز أو اختيار النص أو تشغيل الوسائط.
· يتم استخدامه في تشغيل الرسوم المتحركة الضرورية.
· يتم استخدامه عند التكامل مع مكتبات DOM التابعة لجهات خارجية.
· يمكن استخدامه أيضًا في عمليات الاسترجاعات.
38- ما هو جهاز التوجيه Router React؟
React Router هو نظام مكتبة توجيه قياسي مبني على قمة React. يتم استخدامه لإنشاء التوجيه في تطبيق React باستخدام حزمة React Router Package. يساعدك على تحديد طرق متعددة في التطبيق. يوفر عنوان URL المتزامن على المتصفح بالبيانات التي سيتم عرضها على صفحة الويب. يحافظ على الهيكل القياسي وسلوك التطبيق ويستخدم بشكل أساسي لتطوير تطبيقات الويب ذات الصفحة الواحدة.
39- لماذا نحتاج إلى جهاز توجيه في React؟
يلعب React Router دورًا مهمًا في عرض طرق عرض متعددة في تطبيق صفحة واحدة. يتم استخدامه لتحديد مسارات متعددة في التطبيق. عندما يكتب المستخدم عنوان URL محددًا في المتصفح ، وإذا كان مسار URL هذا يطابق أي "مسار" داخل ملف جهاز التوجيه ، فسيتم إعادة توجيه المستخدم إلى هذا المسار المحدد. لذلك ، نحتاج إلى إضافة مكتبة Router إلى تطبيق React ، مما يسمح بإنشاء مسارات متعددة مع كل منها يقودنا إلى عرض فريد.
<switch>
<h1>React Router Example</h1>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</switch>
-40 ضع قائمة بمزايا جهاز React Router.
المزايا المهمة لـ React Router مذكورة أدناه:
· في هذا ، ليس من الضروري ضبط محفوظات المتصفح يدويًا.
· يستخدم الرابط للتنقل عبر الروابط الداخلية في التطبيق. إنه مشابه لعلامة المرساة.
· يستخدم ميزة التبديل للتقديم.
· يحتاج جهاز التوجيه إلى عنصر فرعي واحد فقط.
· في هذا ، يتم تحديد كل مكون في <المسار>.
· الحزم مقسمة إلى ثلاث حزم ، وهي Web و Native و Core. يدعم الحجم الصغير لتطبيق React.