Component API در ReactJS – آموزش ReactJS

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

reactjs component api 6133 تصویر

Component API در ReactJS

در این بخش به بررسی Component API در React و متدهای setState،forceUpdate و ReactDOM.findDOMNode خواهیم پرداخت. در کلاس های ES6 باید this را به صورت دستی بایند کنیم. در مثال های این بخش ما از this.method.bind(this) استفاده می کنیم.

متد setState

متد setState به منظور به روز رسانی state در کامپوننت ها استفاده می شود. این متد state را به جایگزین نمی کند، بلکه فقط تغییرات را به state اصلی اضافه می کند.

در ابتدا کار آرایه ما خالی است. هر بار که بر روی دکمه کلیک شود، مقدار state به روز رسانی می شود. اگر پنج بار بر روی دکمه کلیک کنید، خروجی زیر را مشاهده خواهید کرد:

reactjs component api 6133 1 تصویر

متد forceUpdate

گاهی اوقات ممکن است بخواهید کامپوننت را به صورت دستی به روز رسانی کنید. با استفاده از متد forceUpdate می توانید این کار را انجام دهید.

در کد فوق ما یک عدد تصادفی را در صفحه نمایش می دهیم که با کلیک بر روی دکمه به روز رسانی می شود.

reactjs component api 6133 2 تصویر

متد ReactDOM.findDOMNode

به منظور دستکاری DOM می توانیم از متد ReactDOM.findDOMNode استفاده کنیم. برای استفاده از این متد باید react-dom را import کنید.

زمانی که بر روی دکمه کلیک شود، رنگ عنصر myDiv سبز می شود.

reactjs component api 6133 3 تصویر

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

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