ReactDOM

اگر شما React از یک تگ <script> بارگذاری کنید، این API های سطح بالا در ReactDOM global قابل دسترسی خواهند بود. اگر از ES6 با npm استفاده می‌کنید، می‌توانید import ReactDOM from ‘react-dom’ را بنویسید. اگر از ES5 با npm استفاده می‌کنید، می‌توانید var ReactDOM = require(‘react-dom’) را بنویسید.

بررسی اجمالی

پکیج react-dom متدهای مختص DOMی را فراهم کرده است که می‌توانند در سطوح بالایی از برنامۀ شما مورد استفاده قرار گیرند و در صورت نیاز به عنوان راه فراری به خارج از مدل React باشند. اکثر کامپوننت‌های شما نیازی به استفاده از این ماژول نخواهند داشت.

  • render()
  • hydrate()
  • unmountComponentAtNode()
  • findDOMNode()
  • createPortal()

پشتیبانی مرورگر

ری‌اکت از تمامی مرورگرهای پرطرفدار پشتیبانی می‌کند، شامل اینترنت اکسپلورر ۹ و بالاتر. هرچند برخی پلیفیل‌ها برای مرورگرهای قدیمی‌تر مانند اینترنت اکسپلورر ۹ و ۱۰ مورد نیاز است.

نکته: ما از مرورگرهایی که از متدهای ES5 پشتیانی نمی‌کنند، پشتیانی نمی‌کنیم، اما ممکن است برنامۀ شما در مرورگرهای قدیمی اگر پلیفیل‌هایی مانند es5-shim و es5-sham وجود داشته باشند، کار کنند. انتخاب مسیر حرکت به خود شما بستگی دارد.

مرجع

render()

ReactDOM.render(element, container[, callback])

یک المان React را درون DOM در container فراهم شده رندر کرده و یک مرجع به کامپوننت برمی‌گرداند (و یا null یا کامپوننت‌های بدون حالت را برمی‌گرداند).

اگر المان React قبلا در container رندر شده باشد، این بار آپدیتی روی آن صورت گرفته و DOM را در صورت نیاز تغییر داده تا آخرین المان React را بازتاب دهد.

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

نکته: ReactDOM.render() محتوای container node انتقال داده شدۀ شما را کنترل می‌کند. تمام المان‌های DOM  موجود در فراخوانی اول جایگزین خواهند شد. فراخوانی‌های بعدی از الگوریتم مقایسۀ DOM ری اکت برای آپدیت‌ها استفاده می‌کند. ReactDOM.render() همچنین container node را ویرایش نمی‌کند (فقط children آن را ویرایش می‌کند). قرار دادن یک کامپوننت در یک DOM node موجود بدون overwrite کردن children موجود نیز امکان پذیر است. در حال حاضر ReactDOM.render() یک مرجع به شیء ReactComponent ریشه برمی‌گرداند. هرچند استفاده از یک مقدار برگردانده شده ارثی بوده و از استفاده از آن باید اجتناب کرد چون در نسخه‌های آینده React ممکن است برخی کامپوننت‌ها را به طور ناهمگام رندر کند. اگر یک مرجع به شیء ReactComponent ریشه نیاز دارید، راه حل پیشنهادی، متصل کردن یک فراخوانی ref به المان ریشه است. استفاده از ReactDOM.render() جهت hydrate کردن یک container رندر تحت سرور منسوخ شده در نسخۀ ۱۷ ری اکت حذف خواهد شد. به جای آن از hydrate() استفاده کنید.

hydrate()

ReactDOM.hydrate(element, container[, callback])

مانند render() بوده اما جهت hydrate کردن یک container که محتوای HTML آن توسط ReactDOMServer رنده شده است استفاده می‌شود. ری اکت تلاش می‌کند listener های رویداد را به مارکآپ موجود متصل کند.

ری‌اکت انتظار دارد محتوای رندر شده بین سرور و مشتری، یکسان باشد. Hydrate می‌تواند تفاوت‌های موجود در محتوای متن را با هم جور کند اما شما باید با عدم تناسب‌ها به عنوان اشکالات برخورد کرده و آنها را تعمیر کنید. در مود برنامه نویسی، React در رابطه با عدم تناسب‌ها حین hydrate کردن هشدار می‌دهد. البته هیچ تضمینی نیست که تفاوت‌ها در صورت عدم تناسب با هم جور شوند. این موضوع به دلایل عملکردی مم است چون در اکثر برنامه‌ها، عدم تناسب‌ها به ندرت وجود داشته و در نتیجه معتبر سازی تمام مارکآپ‌ها بسیار هزینه‌بر است.

اگر attribute یک المان تنها یا محتوای یک متن به طور اجتناب ناپذیر بین سرور و مشتری متفاوت باشد (برای مثال یک برچسب زمان)، شما می‌توانید هشدار را با اضافه کردن suppressHydrationWarning={true} به المان خاموش کنید. این کار فقط در یک سطح پایین‌تر قابل انجام بوده و یک راه فرار است. زیاد هم از آن استفاده نکنید.

اگر به صورت عمدی می‌خواهید چیزی متفاوت بین سرور و مشتری را رندر کنید، می‌توانید یک رندر دو مرحله‌ای انجام دهید. کامپوننت‌هایی که چیزی متفاوت از مشتری را رندر می‌کنند، می‌توانند یک متغیر حالت مانند this.state.isClient را بخوانند که شما می‌توانید آن را در componentDidMount() به صورت true تنظیم کنید. با این کار، مرحلۀ اولیۀ رندر، همان محتوای سرور را رندر کرده و از عدم تناسب جلوگیری می‌کند، اما یک مرحلۀ اضافی هم به طور همزمان پس از hydrate کردن رخ خواهد داد. دقت کنید که این کار سرعت کامپوننت‌های شما را کاهش می‌دهد چون باید دو بار رندر را انجام دهد، پس با احتیاط از آن استفاده کنید.

یادتان باشد که تجربۀ کاربری در سرعت‌های پایین را به یاد داشته باشید. کد جاوا اسکریپت ممکن است به میزان قابل توجهی بعد از رندر اولیۀ HTML لود شود، در نتیجه اگر چیزی متفاوت را فقط در مرحلۀ رندر برای مشتری رندر می‌کنید، انتقال می‌تواند اذیت کننده باشد. هرچند اگر به خوبی اداره و اجرا شده باشد، رندر کردن یک shell از برنامه روی سرور می‌تواند مفید بوده و فقط برخی ویجت‌های اضافی برای مشتری را با کاهش سرعت مواجه کند.

unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

یک کامپوننت ری اکت را از DOM حذف کرده و حالت و کنترل کنندۀ رویداد آن را پاک می‌کند. اگر هیچ کامپوننتی در container نصب شده باشد، فراخوانی این تابع هیچ عملی انجام نخواهد داد. اگر یک کامپوننت حذف گردد true را برمی‌گرداند و اگر هیچ کامپوننتی برای حذف وجود نداشته باشد false را برمی‌گرداند.

findDOMNode()

نکته: findDOMNode یک راه فرار جهت دسترسی به DOM node زیرین است. در اکثر موارد، استفاده از این راه فرار توصیه نمی‌شود زیرا مفهوم کامپوننت را مختل می‌کند. findDOMNode در StrictMode منسوخ شده است.

ReactDOM.findDOMNode(component)

اگر این کامپوننت در DOM نصب شده باشد، findDOMNode المان DOM مرورگر متناظر را برمی‌گراند. این متد برای خواندن مقادیر خارج از DOM مفید است. در اکثر موارد، شما می‌توانید یک ref را به DOM node متصل کرده و به طور کلی از استفاده از findDOMNode اجتناب کنید.

اگر یک کامپوننت null یا false رندر کند، findDOMNode هم null را برمی‌گرداند. اگر یک کامپوننت یک رشته رندر کند، findDOMNode یک DOM node متنی حاوی آن مقدار را برمی‌گرداند. در ری اکت ۱۶، یک کامپوننت ممکن است یک قطعه با چند children را برگرداند که در این حالت findDOMNode هم DOM node متناظر با اولین child غیرخالی را برمی‌گرداند.

نکته: findDOMNode فقط روی کامپوننت‌های نصب شده (یعنی کامپوننت‌هایی که در داخل DOM قرار داده شده‌اند) کار می‌کند. اگر آن را روی یک کامپوننت که هنوز نصب نشده است، فراخوانی کنید (مانند فراخوانی findDOMNode() در render() روی یک کامپوننت که قرار است تازه ساخته شود) یک اعتراض نشان داده خواهد شد.

از findDOMNode روی کامپوننت‌های تابعی نمی‌توان استفاده کرد.

createPortal()

ReactDOM.createPortal(child, container)

یک پورتال می‌سازد. پورتال‌ها راهی را فراهم می‌کنند تا children بتواند درون یک DOM node که خارج از سلسله مراتب کامپوننت DOM قرار دارد رندر شود.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5٫00 out of 5)
Loading...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

counter customizable free hit