امروز انتشار اولین نامزد نسخه React 17. را منتشر می کنیم. دو سال و نیم از انتشار نسخه اصلی قبلی React می گذرد ، که حتی با توجه به استانداردهای ما مدت زمان طولانی است! در این پست وبلاگ ، ما نقش این نسخه اصلی را شرح می دهیم ، چه تغییراتی می توانید در آن انتظار داشته باشید ، و چگونه می توانید این نسخه را امتحان کنید.
نسخه React 17 غیرمعمول است زیرا هیچ ویژگی جدیدی را برای توسعه دهنده اضافه نمی کند. در عوض ، این نسخه در درجه اول در آسانتر کردن به روزرسانی خود React متمرکز است.
ما به طور جدی روی ویژگی های جدید React کار می کنیم ، اما آنها جزئی از این نسخه نیستند. نسخه React 17 بخش مهمی از استراتژی ما برای بیرون کشیدن آنها بدون ترک کسی است.
به طور خاص ، React 17 نسخه ای از “سنگ پله” است که باعث می شود درختکاری که توسط یک نسخه از React در داخل یک درخت اداره می شود با نسخه دیگری از React ، امن تر کند.
برای هفت سال گذشته ، به روز رسانی های React “all-or-nothing ” بوده اند. یا در نسخه قدیمی بمانید ، یا کل برنامه خود را به نسخه جدید ارتقا می دهید. هیچ تفاوتی بین هم وجود نداشت.
این کار تاکنون به نتیجه رسیده است ، اما ما در حال محدود کردن استراتژی ارتقاء “all-or-nothing” هستیم. بعنوان مثال ، برخی از تغییرات API ، با استرداد legacy context API ، به روش اتوماتیک غیرممکن هستند. حتی اگر اکثر برنامه هایی که امروز نوشته شده اند هرگز از آنها استفاده نمی کنند ، ما هنوز هم در React از آنها پشتیبانی می کنیم. ما باید بین پشتیبانی از آنها در React نامحدود تصمیم بگیریم یا برخی از برنامه ها را در نسخه قدیمی React پشت سر بگذاریم. هر دو گزینه عالی نیستند.
بنابراین ما می خواستیم گزینه دیگری ارائه دهیم.
React 17 ارتقاء تدریجی React را فعال می کند. وقتی از React 15 به ۱۶ ارتقا می دهید (یا به زودی ، از React 16 به ۱۷) ، معمولاً کل برنامه خود را یک باره ارتقا می دهید. این برای بسیاری از برنامه ها خوب کار می کند. اما اگر پایه کد بیش از چند سال پیش نوشته شده باشد و به طور فعال حفظ نشود ، می تواند به طور فزاینده ای چالش برانگیز باشد. و در حالی که می توان از دو نسخه React در صفحه استفاده کرد ، تا React 17 این شکننده بوده و باعث بروز مشکلاتی در رویدادها شده است.
ما بسیاری از این مشکلات را با React 17. برطرف می کنیم. این بدان معنی است که وقتی React 18 و نسخه های بعدی بعدی بیرون بیایند ، اکنون گزینه های بیشتری خواهید داشت. اولین گزینه این خواهد بود که مانند قبل از این ، کل برنامه خود را به طور همزمان آپدیت کنید. اما شما همچنین می توانید گزینه ارتقاء برنامه خود را به صورت تکه داشته باشید. به عنوان مثال ، شما ممکن است تصمیم بگیرید که بیشتر برنامه خود را به React 18 منتقل کنید ، اما برخی lazy-loaded dialog یا زیربنایی را در React 17 نگه دارید.
این بدان معنا نیست که باید ارتقاء تدریجی را انجام دهید. برای اکثر برنامه ها ، بروزرسانی همه به یکباره هنوز بهترین راه حل است. بارگیری دو نسخه React – حتی اگر یکی از آنها به تنهایی بارگیری شود – هنوز ایده آل نیست. با این حال ، برای برنامه های بزرگتر که به طور فعال نگهداری نمی شوند ، ممکن است این گزینه در نظر گرفته شود و React 17 این برنامه ها را قادر می سازد از کار خود عقب نمانند.
برای فعال کردن به روزرسانی های تدریجی ، ما نیاز به تغییراتی در سیستم رویداد React داریم. React 17 یک نسخه اصلی است زیرا این تغییرات به طور بالقوه در حال شکستن است. در عمل ، ما فقط از ۱۰۰۰۰۰+ فقط باید بیست مؤلفه را تغییر دهیم ، بنابراین انتظار داریم اکثر برنامه ها بدون مشکل خیلی زیاد بتوانند به React 17 ارتقا دهند. اگر مشکلی پیش آمد ، به ما بگویید.
ما یک example repository را آماده کرده ایم که نشان می دهد چگونه لزوم بارگذاری نسخه قدیمی React در صورت لزوم را بارگیری کنیم. این نسخه ی نمایشی از Creat React App استفاده می کند ، اما باید با هر ابزار دیگری روش مشابهی را دنبال کرد. ما از نسخه های نمایشی با استفاده از ابزارهای دیگر به عنوان درخواست های کشش استقبال می کنیم.
ما تغییرات دیگر را به بعد از React 17. موکول کرده ایم. اگر ارتقاء به React 17 بسیار دشوار بود ، هدف خود را از دست می داد.
از نظر فنی ، همواره می توان برنامه های تولید شده با نسخه های مختلف React را developed کرد. با این حال ، به دلیل نحوه عملکرد سیستم رویداد React بسیار شکننده بود.
در components های React ، معمولاً event handlers را بصورت خطی می نویسید:
<button ={handleClick}>
معادل DOM وانیل با این کد چیزی شبیه به:
myButton.addEventListener('click', handleClick);
با این حال ، برای اکثر رویدادها ، React در واقع آنها را به DOM nodes که شما آنها را اعلام می کنید متصل نمکند. درعوض ، React به هر نوع رویداد به طور مستقیم در document node متصل می شود. به این هیئت رویداد گفته می شود. علاوه بر مزایای عملکرد آن در درختان برنامه های بزرگ ، افزودن ویژگی های جدید مانند پخش مجدد رویدادها را نیز آسان تر می کند.
React از نخستین فعالیت خود به طور خودکار event delegation را انجام می دهد. هنگامی که یک رویداد DOM روی document انجام می گیرد ، در مورد اینکه کدام component را فراخوانی کنید ، و سپس React event “bubbles” به سمت بالا از طریق components شما. اما در پشت صحنه ، در native event قبلاً در سطح document جبران نشده است ، جایی که React event handlers خود را نصب می کند.
با این حال ، این یک مشکل برای ارتقاء تدریجی است.
اگر چندین نسخه React در صفحه دارید ، همه آنها در بالای صفحه event handlers را ثبت می کنند. این ()breaks e.stopPropagation : اگر یک درخت تو در تو متوقف شود انتشار یک رویداد ، درخت بیرونی هنوز آن را دریافت می کند. این امر nest نسخه های مختلف React را دشوار کرده است. این نگرانی فرضی نیست – به عنوان مثال ، ویرایشگر Atom به این چهار سال پیش رسید.
به همین دلیل در حال تغییر دادن چگونگی اتصال React به DOM در زیر hood هستیم.
در React 17 ، React دیگر مجریان رویداد را در سطح سند پیوست نمی کند. در عوض ، آنها را به ظرف DOM ریشه ای که درخت React شما در آن قرار دارد متصل می کند:
const rootNode = document.getElementById('root'); ReactDOM.render(<App />, rootNode);
در React 16 و قبل از آن ، React برای اکثر رویدادها () dokument.addEventListener را انجام می دهد. در عوض React 17 به جای ()rootNode.addEventListener در زیر hood قرار خواهد گرفت.
