ReactDOM

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

مرور کلی

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

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

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

ری‌اکت از تمام مرورگرهای معروف پشتیبانی می‌کند، که شامل Internet Explorer 9 و بالاتر می‌شود، گرچه برای مرورگرهای قدیمی مثل IE 9 و IE 10 به مکمل‌ها(polyfills) نیاز است.

توجه

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

مرجع

render()

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

یک المنت ری‌اکت را درون container داده‌شده رندر می‌کند و یک reference به آن کامپوننت (یا null برای کامپوننت‌های بدون state) باز می‌گرداند.

اگر المت ری‌اکت قبلا درون container رندر شده می‌بود، این دستور یک بروزرسانی روی آن انجام می‌داد و DOM را فقط در صورت لزوم تغغیر (mutate) می‌هد تا آخرین المنت ری‌اکت منعکس شود.

اگر callback دلخواهی داشتیم، بعد از اینکه کامپوننت رندر یا به‌روزرسانی شد اجرا می‌شود.

توجه:

ReactDOM.render() محتوای نود container که به داخل آن می‌فرستید را کنترل می کند. هنگامی که برای اولین بار فراخوانی می‌شود هر المنتی که داخلش باشد جایگزین می‌شود. ولی در سایر فراخوانی‌های بعدی برای بهینه بودن به‌روزرسانی از الگوریتم (React’s DOM diffing) استفاده می‌شود.

ReactDOM.render() نود اصلی را تغییر نمیدهد (فقط فرزنده‌های container را تغییر می‌دهد). شاید ممکن باشد که کامپوننتی را درون نودی که قبلا وجود داشته وارد کرد بدون اینکه نیاز به بازنویسی نودهای زیر شاخه(children) باشد.

ReactDOM.render() در حال حاضر یک reference از ریشه instance ReactComponent برمی‌گرداند. با این حال استفاده از این مقدار برگشتی سنتی است و باید از آن پرهیز شود زیرا در ورژن‌های آینده ری‌اکت شاید برخی کامپوننت‌ها در گاهی اوقات ناهمگام رندر شوند.اگر شما به مرجع instance ریشه ReactComponent نیاز داشتید، بهترین راه حل آن است که یک callback ref به ریشه المنت وصل کنید.

استفاده از ReactDOM.render() برای hydrate کردن یک container که سمت سرور رندر شده‌است، منسوخ شده است و در ورژن ۱۷ ری‌اکت پاک خواهد شد. به جای آن از ()hydrate استفاده کنید.

()hydrate

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

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

ری‌اکت توقع دارد که محتوای رنده شده بین سرور و کاربر همسان باشند. ری‌اکت میتواند اختلافات را در متن محتوا وصله کند، ولی شما باید با عدم تطابق به عنوان باگ نگاه کنید و آنها را رفع کنید. در حالت توسعه، ری‌اکت این عدم تطابق را در مدت hydration به ما هشدار می‌دهد. هیچ تضمینی وجود ندارد که تفاوت‌های بین attribute در مواردی که عدم تطابق داریم وصله شوند. از این جهت برای عملکرد بهتر مهم است زیرا در اکثر نرم‌افزارها، عدم تطابق نادر است، و راست‌آزمایی markups میتواند از این نظر بسیار گران باشد.

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

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

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

unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

یک کامپوننت mount شده ری‌اکت را از DOM حذف و تمام event handler ها و state آن را پاک می‌کند. اگر هیچ کامپوننتی در mount container نشده باشد، فراخوانی این تابع هیچ کاری نمی‌کند. مقدار true را برای کامپوننت‌هایی که mount شدن و مقدار false را در زمانی که هیچ کامپوننتی mount نشده باشد برمی‌گرداند.

()findDOMNode

توجه: findDOMNode یک راه فرار است که برای دسترسی به DOM نود زیرین استفاده می‌شود. در بیشتر موارد، استفاده از این راه فرار پیش‌نهاد نمی‌شود. زیرا نفوذی به [لایه] abstraction کامپوننت است. این قابلیت در StrictMode منسوخ شده است.

ReactDOM.findDOMNode(component)

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

هنگامی که کامپوننت null یا false رندر می‌کند findDOMNode مقدار null برمی‌گرداند. و هنگامی که کامپوننت متن رندر میکند findDOMNode یک DOM نود متنی شامل آن مقدار برمی‌گرداند. از از ری‌اکت ۱۶، یک کامپوننت شاید یک fragment با تعدادی فرزند درونش را رندر کند که در این صورت findDOMNode یک نود DOM متناظر با اولین فرزند غیر خالی را برمی‌گرداند.

توجه:

findDOMNode فقط روی کامپوننت‌هایی که mount شده اند کار می‌کنند (که آن کامپوننت در جای خود در DOM قرار گرفته است). اگر سعی کنید که آن را در کامپوننت فراخوانی کنید که هنوز در صفحه mount نشده است (مثل فراخوانی findDOMNode() در render() روی کامپوننتی که هنوز ایجاد نشده است) به exception میخورید.

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

createPortal()

ReactDOM.createPortal(child, container)

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