كتب أبرز المميزات
اذا لم تجد ما تبحث عنه يمكنك استخدام كلمات أكثر دقة.
أبرز المميزات (معلومة)
ربط البيانات في اتجاه واحد مع الدعم
يتم تمرير خصائص (عادةً، props) إلى مكون من المكون الأساسي. تتلقى المكونات props كـ مجموعة واحدة من القيم غير القابلة للتغيير (كائن JavaScript). كلما تغيرت أي قيمة دعامية، تسمى render function السماح للمكون بعرض التغيير.
مكونات ثابته
تحتفظ الدول بقيم في جميع أنحاء المكون ويمكن تمريرها إلى المكونات الفرعية من خلال الدعائم:
class ParentComponent extends React.Component { state = { color: 'red' }; render() { return ( <ChildComponent color={this.state.color}></div> ); } }
DOM مرئي
ميزة أخرى ملحوظة هي استخدام "نموذج كائن المستند الافتراضي" أو "DOM الظاهري". ينشئ React ذاكرة تخزين مؤقت لبنية البيانات في الذاكرة، ويحسب الاختلافات الناتجة، ثم يقوم بتحديث DOM المعروض في المتصفح بكفاءة. يسمح هذا للمبرمج بكتابة الكود كما لو أن الصفحة بأكملها يتم تقديمها في كل تغيير، بينما تقوم مكتبات React بإعادة تقديم المكونات الفرعية التي تتغير فعليًا.
أساليب دورة الحياة
تعتبر أساليب دورة الحياة هي التي تسمح بتنفيذ التعليمات البرمجية في نقاط التعيين خلال عمر المكون.
- يتيح shouldComponentUpdate للمطوّر منع إعادة عرض غير ضروري لأحد المكونات عن طريق إرجاع false إذا كان العرض غير مطلوب. يتم استدعاء componentDidMount بمجرد أن يكون المكون مركبًا (تم إنشاء المكون في واجهة المستخدم، غالبًا عن طريق ربطه بعقد DOM). يُستخدم هذا بشكل شائع لتشغيل تحميل البيانات من مصدر بعيد عبر واجهة برمجة التطبيقات. تقديم هو أسلوب دورة الحياة الأهم وواحد فقط المطلوبة في أي مكون. وعادة ما يطلق عليه في كل مرة يتم تحديث بيانات المكون، مما يعكس التغييرات في واجهة المستخدم.
JSX
جافا سكريبت XML (JSX) هو امتداد لبناء جملة لغة JavaScript. تشبه JSX في مظهرها إلى HTML ، وتوفر طريقة لتنظيم عرض المكون باستخدام صيغة مألوفة للعديد من المطورين. عادةً ما يتم كتابة مكونات التفاعل باستخدام JSX ، على الرغم من أنه لا يلزم أن تكون (يمكن كتابة المكونات أيضًا في JavaScript خالصة). يشبه JSX بنية ملحق أخرى تم إنشاؤها بواسطة Facebook لـ PHP ، XHP.
مثال على كود JSX:
class App extends React.Component { render() { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> ); } }
- العناصر المتداخلة
هناك عناصر متعددة في نفس المستوى تحتاج إلى وضعها في عنصر واحد مثل عنصرالموضح أعلاه، أو يتم إرجاعها كمصفوفة.
- السمات
يوفر JSX نطاقًا من سمات العناصر المصممة لمراعاة تلك التي يوفرها HTML. يمكن أيضًا تمرير السمات المخصصة إلى المكون. سيتم استلام كل السمات بواسطة المكون على شكل دعائم.
- تعبيرات JavaScript
يمكن استخدام تعبيرات JavaScript (وليس عبارات) داخل JSX مع الأقواس {}:
<h1>{10+1}</h1>
المثال السابق سوف ينفذ هذه النتيجة:
<h1>11</h1>
- عبارات شرطية
إذا تعذر استخدام عبارات-else داخل JSX ، فيمكن استخدام التعبيرات الشرطية بدلاً من ذلك. سيوضح المثال أدناه {i === 1؟ "true": "false"} كسلسلة "true" لأن i يساوي 1.
class App extends React.Component { render() { const i = 1; return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); } }
يمكن استخدام الدالات و JSX في الشروط الشرطية:
class App extends React.Component { render() { const sections = [1, 2, 3]; return ( <div> { sections.length> 0 ? sections.map(n => <div>Section {n}</div>) : null } </div> ); } }
المثال السابق سوف ينفذ:
<div> <div>Section 1</div> <div>Section 2</div> <div>Section 3</div> </div>
تتطلب الشفرة المكتوبة في JSX التحويل باستخدام أداة مثل Babel قبل فهمها بواسطة متصفحات الويب. يتم تنفيذ هذه المعالجة بشكل عام أثناء عملية إنشاء برنامج قبل نشر التطبيق.
العمارة بعد HTML
يتم تطبيق البنية الأساسية لـ React بعد تقديم HTML في المستعرض. على سبيل المثال، يحتوي موقع Facebook على مخططات ديناميكية يتم عرضها على علامات
