کامپوننت ها در ReactJS – آموزش ReactJS

  • سه شنبه ۷ اسفند ۱۳۹۷
  • بازدید ۱۹۱ نفر

reactjs components 6093 تصویر

کامپوننت ها در ReactJS

در این بخش چگونگی استفاده از کامپوننت ها در ReactJS را بررسی خواهیم کرد. استفاده از کامپوننت ها باعث می شود تا فرآیند ایجاد نرم افزار ساده تر شود و در صورت ایجاد تغییر در بخشی از صفحه، تاثیری در سایر بخش ها نمی گذارد.

نمونه Stateless

اولین کامپوننت موجود در این مثال، کامپوننت App است که به عنوان کامپوننت صاحب (اصلی) برای کامپوننت های Header و Content در نظر گرفته می شود. ما کامپوننت های Header و Content را به صورت جداگانه ایجاد و در کامپوننت App اضافه می کنیم.

محتوای فایل App.jsx:

برای اینکه بتوانیم این صفحه را رندر کنیم، باید آن را در main.js اضافه کنیم. ما قبلا در بخش آماده سازی محیط این کار را انجام داده ایم.

محتوای فایل main.js:

کد فوق خروجی زیر را تولید می کند:

reactjs components 6093 1 تصویر

نمونه Stateful

در این مثال ما state را برای کامپوننت App تنظیم خواهیم کرد. کامپوننت Header مانند مثال بالا اضافه می شود، اما برای کامپوننت Content ما یک جدول ایجاد کرده ایم و به صورت پویا داده های موجود در آرایه data را به یک نمونه از TableRow تبدیل کرده و وارد می کنیم.

در کد زیر ما از سینتکس EcmaScript 2015 استفاده کرده ایم (=>) که بسیار تمیز تر از سینتکس قدیمی جاوا اسکریپت است. استفاده از این سینتکس به ما کمک می کند تا خطوط کدهای نوشته شده را کاهش دهیم. همچنین در هنگام ایجاد لیست هایی با تعداد آیتم زیاد بسیار مفید است.

محتوای فایل App.jsx:

محتوای فایل main.js:

توجه داشته باشید که ما از key = {i} در داخل تابع map() استفاده کرده ایم. این موضوع به React کمک می کند تا به جای دوباره رندر کردن کل لیست، فقط عناصری که تغییر کرده اند را رندر کند.

خروجی مثال فوق:

reactjs components 6093 2 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است