بررسی اجمالی
ReactJS معمولا برای توسعه راه حل ها در SharePoint Framework استفاده می شود. واکشی داده ها از سایت شیرپوینت، آفیس 365، MS Graph API یا هر سرویس خارجی و نمایش آن در بخش وب SharePoint Framework یک روش معمول است. با این حال، همیشه یک سردرگمی در مورد اینکه کدام روش React بهترین مکان برای واکشی داده است وجود دارد.
در این مقاله، تمام گزینههای ممکن برای واکشی دادهها از اجزای React و مزایا و معایب هر گزینه را بررسی میکنیم.
روش رندر کامپوننت React
هر جزء React یک متد Render دارد. تصور واضح این است که مکانیزم فا اچ در متد Render وجود داشته باشد. با این حال، مکان مناسبی برای واکشی داده ها نیست، دلیل آن این است که باعث تغییر حالت می شود. همچنین، انجام هر گونه فراخوانی ناهمزمان در متد Render توصیه نمی شود.
گزینه های رایج مورد استفاده عبارتند از componentWillMount و componentDidMount.
componentWillMount
این متد درست قبل از اولین رندر کامپوننت React فراخوانی می شود. فقط با خواندن این بیانیه، داشتن مکانیزم واکشی در داخل componentWillMount وسوسه انگیز است. اما صبر کن! این مکان ممکن است برای واکشی دادهها ایدهآل نباشد زیرا تماسهای ناهمزمان برای واکشی دادهها ممکن است قبل از اجرای روش Render برنگردند. این به این معنی است که احتمال زیادی وجود دارد که کامپوننت حداقل یک بار داده های خالی را ارائه دهد.
همچنین نمیتوانیم تا زمانی که componentWillMount تمام شود، متد Render را متوقف کنیم، و همچنین نمیتوانیم قولی را از componentWillMount برگردانیم. برای رسیدگی به این وضعیت، میتوانیم وضعیت اولیه مولفه را تنظیم کنیم.
اجازه دهید مثالی از واکشی داده ها از سرویس بیاوریم.
در این مثال، componentWillMount در حال فراخوانی dataService به صورت ناهمزمان است که منجر به ایجاد داده خالی در اولین رخداد می شود.
برای مدیریت این وضعیت، می توانیم حالت اولیه را در سازنده تنظیم کنیم
همچنین می توانیم داده های خالی را در متد Render بررسی کنیم.
componentWillMount اکنون منسوخ شده است، بنابراین ادامه استفاده از این روش ایده خوبی نیست.
componentDidMount
کامپوننت React یک بار قبل از فراخوانی componentDidMount رندر می شود. ایده آل است که از این روش برای واکشی داده ها به دلایل زیر استفاده کنید:
- داده ها تا پس از رندر اولیه بارگذاری نمی شوند. این امر تنظیم حالت اولیه را برای جلوگیری از خطاهای وضعیت نامشخص اجباری می کند.
- در صورتی که برنامه نیاز به رندر سرور داشته باشد، componentWillMount دو بار (یک بار روی سرور و روی مشتری) فراخوانی می شود. داشتن مکانیزم واکشی داده در componentDidMount تضمین میکند که دادهها فقط یک بار در کلاینت واکشی میشوند.
componentDidMount همیشه پس از اولین رندر زمانی که داده ها را دریافت کرد، روی کلاینت فراخوانی می شود. سعی کنید از هر نوع تغییر حالت در componentDidMount اجتناب کنید، زیرا باعث رندر مجدد کامپوننت می شود که به نوبه خود componentDidMount را فراخوانی می کند که دوباره متد Render و غیره را فراخوانی می کند. این باعث ایجاد یک حلقه بی نهایت می شود.
componentDidMount را می توان برای راه اندازی فرآیندهای در حال اجرا طولانی که می تواند داده ها را از شیرپوینت یا هر سرویس خارجی به صورت دوره ای واکشی کند، استفاده کرد.
خلاصه
هنگام توسعه وبپارت SharePoint Framework با React، توصیه میشود از componentDidMount در هر مکان دیگری استفاده کنید. سعی کنید از استفاده از componentWillMount به دلیل قدیمی بودن آن اجتناب کنید. روش رندر مکان مناسبی برای واکشی داده نیست زیرا باعث تغییر حالت می شود.