{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2020/10/20/react-v17.html","result":{"data":{"markdownRemark":{"html":"

امروز ، نسخه ۱۷ ری اکت را منتشر می‌کنیم! ما درباره منتشر کردن ری‌اکت نسخه ۱۷ و تغییراتی که در آن ایجاد شده‌است به طور مفصل در پست نسخه برگزیده‌ی انتشار (rc) ری اکت ۱۷.۰.۰ صحبت کرده‌ایم . این پست خلاصه‌ای از آن است ، بنابراین اگر پست قبلی راجع به نسخه برگزیده‌ی انتشار ری اکت ۱۷.۰.۰ را خوانده‌اید ، می‌توانید از خواندن این پست صرف‌نظر کنید.

\n

قابلیت جدیدی وجود ندارد

\n

نسخه ۱۷ ری‌اکت به دلیل این‌که هیچ قابلیت جدیدی برای توسعه‌دهندگان ندارد ، غیرمعمول به‌نظر می‌رسد. در عوض، در درجه اول در این نسخه تمرکز بر روی این است که خود ری‌آکت را آسان‌تر ارتقا دهیم.

\n

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

\n

همچنین قراردادن ری‌اکت درون برنامه‌ای که با تکنولوژی‌های دیگر ساخته‌شده‌است را آسان‌تر می‌کند.

\n

ارتقا‌های تدریجی

\n

ری‌اکت ۱۷ ارتقا تدریحی را ممکن می‌کند. زمانی که شما از ری اکت نسخه ۱۵ به ۱۶ (یا حالا از ۱۶ به ۱۷) ارتقا می‌دهید، معمولا شما تمام برنامه را یک‌باره به‌روز رسانی خواهید کرد. به این‌صورت ممکن است برای بیشتر برنامه‌ها کار کند. اما اگر کد های شما چندین سال پیش نوشته شده باشد و در این مدت به صورت فعال از آن نگهداری نشده باشد، می‌تواند بسیار چالش برانگیز باشد. در حالی‌که ممکن است دو نسخه متفاوت از ری‌اکت درون یک صفحه وجود داشته باشد، تا پیش از ری‌اکت ۱۷ می‌توانست شکننده و باعث بروز مشکلاتی برای رویداد‌ها شود.`

\n

ما اکثر این مشکلات را با ری‌اکت ۱۷ برطرف می‌کنیم. این بدان معنی است که زمانی که ری‌اکت ۱۸ و نسخه‌های آینده منتشر شود، شما گزینه‌های بیشتری خواهید داشت. اولین گزینه ارتقا یک‌باره‌ی کل برنامه است، شبیه به چیزی که قبلا اتفاق می‌افتاد. اما حالا شما گزینه‌ی دیگری برای ارتقا برنامه خود به شکل تکه تکه دارید. برای مثال شما می‌خواهید بیشتر برنامه خود را به نسخه ۱۸ ری‌اکت به‌روز رسانی کنید اما تصمیم می‌گیرید یک lazy-loaded dialog یا یک زیر مجموعه (subroute) از برنامه را روی نسخه ۱۷ نگه دارید.

\n

به معنی این نیست که شما مجبورید برنامه خود را به شکل تدریجی ارتقا دهید. بلکه ارتقا یکباره‌ی کل برنامه برای بیشتر موارد بهترین راهکار است. اجرای هم‌زمان دو نسخه از ری‌اکت حتی اگر یکی از آن ها به شکل lazy-load اجرا شوند نیز هنوز ایده‌آل نیست. اگرچه برای برنامه‌های بزرگی که دیگر به طور فعالانه نگهداری نمی‌شوند این گزینه می‌تواند منطقی به‌نظر برسد و ری‌اکت ۱۷ مانع از عقب ماندن این دسته از برنامه‌ها می‌شود.

\n

ما یک مخزن کد نمونه آماده کرده‌ایم که چگونه یک نسخه قدیمی از ری‌اکت را اگر لازم است به شکل lazy-load اجرا کنید. این مثال از Create React App استفاده می‌کند. اما با دیگر راهکارهای مشابه که از ابزار های دیگری استفاده می‌کنند نیز این امر ممکن است، ما از دیگر مقال‌هایی که با ابزار‌های دیگر به عنوان pull request برای ما ارسال شود، استقبال می‌کنیم.

\n
\n

یادداشت

\n

ما تغییرات دیگر را به بعد از ری‌اکت ۱۷ موکول کرده‌ایم. هدف از انتشار این نسخه فعال کردن قابلیت ارتقا تدریجی است. اگر ارتقا به ری اکت ۱۷ پیچیده شود هدف آن با شکست روبرو خواهد شد.

\n
\n

تغییراتی در محول کننده رویداد‌ها (event delegation)

\n

برای فعال کردن قابلیت ارتقا تدریجی، ما به کمی تغییر در سیستم رویدادهای ری‌اکت نیاز داشتیم. ری اکت ۱۷ انتشار یک نسخه major است به این علت که این تغییرات می‌توانند شکننده باشند. شما می‌توانید سوالات متداول مارا نسبت به این موضوع را بخوانید تا درباره تعهد ما نسبت به ثبات این تغییرات، اطلاعت لازم را به‌دست آورید.

\n

ری اکت ۱۷ دیگر هیچ یک از event handler ها را به سطح documentمتصل نمی‌کند. در عوض، آن را به [المنت] دربردارنده ریشه DOM که درخت ری اکت از آن رندر می‌شود، متصل می کند:

\n
const rootNode = document.getElementById('root');\nReactDOM.render(<App />, rootNode);
\n

در ری اکت ۱۶ و قبل‌تر، ری‌اکت برای اکثر رویداد هایش از document.addEventListener() استفاده می‌کرد. ری‌اکت ۱۷ با صدا زدن rootNode.addEventListener() این کار را در پشت پرده انجام می‌دهد.

\n

\n \n \n \n \n \n \n \n \n \n

\n

ما متوجه این موضوع شدیم که بسیاری از مشکلات گزارش شده در بیشتر این سال ها که در بخش مشکلات ثبت شده برای ما وجود داشت مربوط به در هم آمیخته شدن کد های ری اکتی با کد های غیر ری اکتی بود که این مورد با یک روش جدید برطرف گردید.

\n

اگر شما با این تغییرات با خطا مواجه شدید, اینجا یک راه رایج برای برطرف کردن آن وجود دارد.

\n

تغییرات اساسی دیگر

\n

در پست معرفی ری‌اکت ۱۷ نسخه برگزیده انتشار (rc) ما تغییرات اساسی موجود در ری اکت ۱۷ را توضیح داده‌ایم .

\n

تا کنون ما با توجه به تغییرات صورت گرفته تنها مجبور به تغییر کمتر از بیست کامپوننت از بیش از ۱۰۰,۰۰۰ کامپوننت موجود در Facebook شده‌ایم. بنابراین ما انتظار داریم که اکثر برنامه‌ها بتوانند بدون مشکل به نسخه ۱۷ از ری‌اکت ارتقا پیدا کنند. لطفا اگر به مشکلی برخورد کردید آن را با ما در میان بگذارید.

\n

تغییر شکل جدید JSX

\n

ری اکت ۱۷ از تغییر شکل جدید JSX پشتیبانی می‌کند. ما همچنین در نسخه ۱۶.۱۴۰ و ۱۵.۷.۰ و ۰.۱۴.۱۰ از این قابلیت پشتیبانی خواهیم کرد. به این مورد توجه کنید که این قابلیت کاملا اختیاری است و شما مجبور به استفاده از آن نیستید. تغییر شکل قبلی JSX را می‌توانید همچنان استفاده کنید و برنامه‌ای برای حذف پشتیبانی از آن وجود ندارد .

\n

ری اکت نیتیو

\n

ری‌اکت نیتیو برنامه زمانی مشخصی برای انتشار دارد. ما در حال حاضر انتظار پشتیبانی از ری اکت ۱۷ برای استفاده در ری اکت نیتیو ۰.۶۵ داریم، اما نسخه دقیق آن باید تغییر کند. مثل همیشه شما می‌توانید بحث‌های مربوط به انتشار ری‌اکت نیتیو را در انجمن مربوط به آن پیگیری کنید.

\n

نصب

\n

برای نصب ری اکت 17 توسط npm این خط را اجرا کنید :

\n
npm install react@17.0.0 react-dom@17.0.0
\n

برای نصب ری اکت 17 توسط yarn این خط را اجرا کنید :

\n
yarn add react@17.0.0 react-dom@17.0.0
\n

همچنین ما UDM Build هایی از ری اکت را توسط سرور های CDN امان برای شما فراهم کردیم :

\n
<script crossorigin src=\"https://unpkg.com/react@17.0.0/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@17.0.0/umd/react-dom.production.min.js\"></script>
\n

برای جزئیات بیشتر نصب به مستندات سایت رجوع کنید.

\n

تغییرات

\n

React

\n\n

React DOM

\n\n

React DOM Server

\n\n

React Test Renderer

\n\n

Concurrent Mode (Experimental)

\n","excerpt":"امروز ، نسخه ۱۷ ری اکت را منتشر می‌کنیم! ما درباره منتشر کردن ری‌اکت نسخه ۱۷ و تغییراتی که در آن ایجاد شده‌است به طور مفصل در پست نسخه برگزیده‌ی انتشار (rc…","frontmatter":{"title":"ری اکت نسخه ۱۷.۰.۰","next":null,"prev":null,"author":[{"frontmatter":{"name":"Dan Abramov","url":"https://twitter.com/dan_abramov"}},{"frontmatter":{"name":"Rachel Nabors","url":"https://twitter.com/rachelnabors"}}]},"fields":{"date":"October 20, 2020","path":"content/blog/2020-10-20-react-v17.md","slug":"/blog/2020/10/20/react-v17.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"ری اکت نسخه ۱۷.۰.۰"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}}]}},"pageContext":{"slug":"/blog/2020/10/20/react-v17.html"}},"staticQueryHashes":[]}