مفهوم Rendering (التصيير) في React

في React، مفهوم Rendering (التصيير) يشير إلى عملية تحويل مكونات React إلى عناصر DOM يمكن عرضها على الشاشة. إليك شرحًا مبسطًا:

التصيير الأولي:

عند إنشاء مكون React، يتم استدعاء الدالة render() الخاصة به. هذه الدالة تأخذ البيانات المدخلة (props) وتعيد ما يجب عرضه على الشاشة باستخدام JSX.
على سبيل المثال:

class MyComponent extends React.Component {
render() {
return <h1>مرحبًا بالعالم!</h1>;
}
}

عندما تتغير حالة المكون (state) أو خصائصه (props)، يقوم React بإعادة استدعاء الدالة render() لتحديث العرض.
React يستخدم تقنية تُسمى Virtual DOM لمقارنة الشجرة الحالية مع الشجرة الجديدة وتحديث فقط الأجزاء التي تغيرت، مما يجعل العملية أكثر كفاءة.

التصيير الشرطي:

render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? <h1>مرحبًا بك!</h1> : <h1>الرجاء تسجيل الدخول</h1>}
</div>
);
}

التصيير القائم على القوائم:

render() {
const items = this.props.items;
return (
<ul>
{items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
);
}

مدونة أحمد زعـــــــــكان