تابع تعلم رياكت React الجزء 3
تابع تعلم رياكت React الجزء 3
 |
| تعلم راكت |
تعلم رياكت
16- ما هو الحدث event في React؟
الحدث هو إجراء يتم تشغيله كنتيجة لإجراءات المستخدم أو حدث تم إنشاؤه بواسطة النظام مثل النقر بالماوس أو تحميل صفحة ويب أو الضغط على مفتاح أو تغيير حجم النافذة وما إلى ذلك. في React ، يشبه نظام معالجة الأحداث إلى حد كبير المعالجة الأحداث في عناصر DOM. يُعرف نظام معالجة حدث React باسم Synthetic Event ، وهو عبارة عن غلاف متعدد المتصفحات للحدث الأصلي للمتصفح. تابع تعلم رياكت React الجزء 3
تحتوي معالجة الأحداث باستخدام React على بعض الاختلافات النحوية ، وهي:
· يتم تسمية أحداث React باسم camelCase بدلاً من الأحرف الصغيرة.
· باستخدام JSX ، يتم تمرير وظيفة كمعالج الحدث بدلاً من سلسلة.
17 -كيف تنشئ حدثًا في React؟
يمكننا إنشاء حدث على النحو التالي.
HTML
class Display extends React.Component({
show(msgEvent) {
// code
},
render() {
// Here, we render the div with an onClick prop
return (
<div onClick={this.show}>Click Me</div>
);
}
});
مثال
---
HTML
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
companyName: ''
};
}
changeText(event) {
this.setState({
companyName: event.target.value
});
}
render() {
return (
<div>
<h2>Simple Event Example</h2>
<label htmlFor="name">Enter company name: </label>
<input type="text" id="companyName" onChange={this.changeText.bind(this)}/>
<h4>You entered: { this.state.companyName }</h4>
</div>
);
}
}
export default App;
18- ما هي الأحداث التركيبية في React؟
الحدث التركيبي هو كائن يعمل كغلاف عبر المتصفحات حول الحدث الأصلي للمتصفح. فهو يجمع بين سلوك الحدث الأصلي لمتصفح مختلف في واجهة برمجة تطبيقات واحدة ، بما في ذلك stopPropagation () و PreventionDefault ().
في المثال المعطى ، e هو حدث اصطناعي.
----
HTML
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('You had clicked a Link.');
}
return (
<a href="#" onClick={handleClick}>
Click_Me
</a>
);
}
19- ما هو الفرق بين المكونات الخاضعة للرقابة وغير الخاضعة للرقابة؟
الفرق بين المكونات الخاضعة للرقابة وغير المنضبط هو:
Controlled خاضع للسيطرة
Uncontrolled غير منضبط
لا تحافظ على حالتها الداخلية.
يحافظ على حالاته الداخلية.
هنا ، يتم التحكم في البيانات بواسطة المكون الرئيسي.
هنا ، يتم التحكم في البيانات بواسطة DOM نفسه.
يقبل قيمته الحالية كدعم.
يستخدم المرجع لقيمهم الحالية.
يسمح بالتحكم في التحقق من الصحة.
لا يسمح بالتحكم في التحقق من الصحة.
يتحكم بشكل أفضل في عناصر النموذج والبيانات.
لديها سيطرة محدودة على عناصر النموذج والبيانات.
20- شرح القوائم List في React.
تستخدم القوائم لعرض البيانات بتنسيق مرتب. في React ، يمكن إنشاء القوائم بطريقة مماثلة لإنشائها في JavaScript. يمكننا اجتياز عناصر القائمة باستخدام وظيفة map ().Example
HTML
import React from 'react';
import ReactDOM from 'react-dom';
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((myList) =>
<li>{myList}</li>
);
return (
<div>
<h2>Rendering Lists inside component</h2>
<ul>{listItems}</ul>
</div>
);
}
const myLists = ['Peter', 'Rami', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
<NameList myLists={myLists} />,
document.getElementById('app')
);
export default App;
21- ما هي أهمية المفاتيح Key في React؟
المفتاح هو معرف فريد. في React ، يتم استخدامه لتحديد العناصر التي تم تغييرها أو تحديثها أو حذفها من القوائم. إنه مفيد عندما نقوم بإنشاء مكونات ديناميكيا أو عندما يغير المستخدمون القوائم. كما أنه يساعد على تحديد المكونات الموجودة في المجموعة التي يجب إعادة عرضها بدلا من إعادة عرض مجموعة المكونات بأكملها في كل مرة. يزيد من أداء التطبيق.