مكونات ReactJS (Components)

في هذا الفصل، سنتعلم كيفية دمج المكونات لجعل تطبيقنا أسهل في الصيانة. هذا الأسلوب يسمح بتحديث وتغيير المكونات دون تأثير على بقية الصفحة.

مثال على مكون بدون حالة

في هذا المثال، المكون الأول هو App. هذا المكون هو المالك لـ Header و Content. نحن نقوم بإنشاء Header و Content بشكل منفصل ونضيفهما إلى شجرة JSX الخاصة بمكوننا App. فقط مكون التطبيق يحتاج إلى التصدير.

App.jsx

import React from 'react';
class　App　extends　React.Component　{　　　render()　{
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<Content/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Header extends React.Component {    render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Content　extends　React.Component　{　　　render()　{
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>Content</h2>
　　　　　　　　　　　　<p>The　content　text!!!</p>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App　/>,　document.getElementById('app'));

سيقوم الكود المذكور أعلاه بإنشاء النتيجة التالية.

مثال على مكون به حالة

في هذا المثال، سنقوم بتعيين حالة المكون المالك (App). Header يتم إضافة المكونات كما في المثال السابق، لأنها لا تحتاج إلى أي حالة. سنقوم بإنشاء عناصر table و tbody بدلاً من content العلامات، حيث سنقوم بتعيين TableRow ديناميكياً لكل عنصر في مجموعة البيانات.

يمكن رؤية أن استخدامنا لقواعد التعبير الجديدة لـ EcmaScript 2015 (=>) يبدو أكثر نظافة من لغة JavaScript القديمة. هذا سيؤدي إلى استخدام عدد أقل من سطور الكود لإنشاء العناصر. وهو مفيد بشكل خاص عند الحاجة إلى إنشاء قائمة تحتوي على العديد من العناصر.

App.jsx

import React from 'react';
class　App　extends　React.Component　{　　　constructor()　{　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:　
　　　　　　　　　[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":1,
　　　　　　　　　　　　　　　"name":"Foo",
　　　　　　　　　　　　　　　"age":"20"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":2,
　　　　　　　　　　　　　　　"name":"Bar",
　　　　　　　　　　　　　　　"age":"30"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":3,
　　　　　　　　　　　　　　　"name":"Baz",
　　　　　　　　　　　　　　　"age":"40"
　　　　　　　　　　　　}
　　　　　　　　　]}}
　　　　　　}
　　　}
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　<tbody>
　　　　　　　　　　　　　　　　　　{this.state.data.map((person, i) => <TableRow key = {i}　
　　　　　　　　　　　　　　　　　　　　　data = {person} />)}
　　　　　　　　　　　　　　　</tbody>
　　　　　　　　　　　　</table>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Header extends React.Component {    render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class TableRow extends React.Component {    render() {
　　　　　　return (
　　　　　　　　　<tr>
　　　　　　　　　　　　<td>{this.props.data.id}</td>
　　　　　　　　　　　　<td>{this.props.data.name}</td>
　　　　　　　　　　　　<td>{this.props.data.age}</td>
　　　　　　　　　</tr>
　　　　　　);
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

لاحظ أننا استخدمنا key = { i } داخل دالة map(). هذا سيساعد React في تحديث العناصر الضرورية فقط، وليس إعادة عرض القائمة بأكملها عند التغيير. هذا يعتبر تحسينًا كبيرًا في الأداء للعناصر المُنشأة بشكل متكرر.