هر چه تا کنون در مورد react17 گفته اند

React v17.0 کاندیدای انتشار: هیچ ویژگی جدیدی نداریدامروز انتشار اولین نامزد نسخه 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 ارتقا دهند. اگر مشکلی پیش آمد ، به ما بگویید.Demo of Gradual Upgradesنسخه ی نمایشی ارتقاء تدریجیما یک example repository را آماده کرده ایم که نشان می دهد چگونه لزوم بارگذاری نسخه قدیمی React در صورت لزوم را بارگیری کنیم. این نسخه ی نمایشی از Creat React App استفاده می کند ، اما باید با هر ابزار دیگری روش مشابهی را دنبال کرد. ما از نسخه های نمایشی با استفاده از ابزارهای دیگر به عنوان درخواست های کشش استقبال می کنیم.توجه داشته باشیدما تغییرات دیگر را به بعد از React 17. موکول کرده ایم. اگر ارتقاء به React 17 بسیار دشوار بود ، هدف خود را از دست می داد.Changes to Event Delegationاز نظر فنی ، همواره می توان برنامه های تولید شده با نسخه های مختلف 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 قرار خواهد گرفت.sandbox را ببینید.No Event PoolingReact 17 بهینه سازی ” event pooling” را از React حذف می کند. این کار باعث بهبود عملکرد در مرورگرهای مدرن نمی شود و حتی کاربران با تجربه React را گیج می کند:function handleChange(e) { setData(data => ({ ...data, // This crashes in React 16 and earlier: text: e.target.value })); }این امر به این دلیل است که React برای عملکرد در مرورگرهای قدیمی از event objects بین رویدادهای مختلف استفاده مجدد کرده و همه زمینه های رویداد را تنظیم می کند تا بین آنها خنثی شود. برای استفاده صحیح از این رویداد ، با React 16 و قبل از آن ، باید با ()e.persist ارتباط بگیرید یا property مورد نیاز خود را زودتر بخوانید.در React 17 ، این کد همانطور که انتظار دارید کار می کند. بهینه سازی جمع آوری رویداد قدیمی کاملاً از بین رفته است ، بنابراین می توانید event fields را هر زمان که بخواهید بخوانید.این یک تغییر behavior است ، به همین دلیل ما آن را به عنوان breaking علامت گذاری می کنیم ، اما در عمل شاهد آن نبودیم که در فیس بوک چیزی خراب کند. (شاید حتی برخی از اشکالات را برطرف کند!) توجه داشته باشید که ()e.persist هنوز هم در مورد رویداد React موجود است ، اما اکنون کاری انجام نمی دهد.Effect Cleanup Timingما زمان تابع پاکسازی useEffect را بیشتر می کنیم.useEffect(() => { // This is the effect itself. return () => { // This is its cleanup. }; });بیشتر جلوه ها نیازی به تأخیر در بروزرسانی های صفحه ندارند ، بنابراین React به زودی پس از نمایش به روزرسانی روی صفحه ، آنها را به صورت غیرهماهنگ اجرا می کند. (برای موارد نادری که برای مسدود کردن رنگ به جلوه ای نیاز دارید ، به عنوان مثال برای اندازه گیری و قرار دادن یک ابزار ابزار ، استفاده از LayoutEffect را ترجیح دهید.)با این حال ، عملکرد effect cleanup ، هنگامی که وجود دارد ، استفاده می شود به صورت همزمان در React 16. ما متوجه شده ایم که ، مشابه با componentWillUnmount در کلاسها همزمان است ، این برای برنامه های بزرگتر ایده آل نیست زیرا باعث کاهش سرعت صفحه بزرگ می شود (به عنوان مثال switching tabs).در React 17 ، عملکرد effect cleanup نیز به صورت غیر همزمان انجام می شود – به عنوان مثال ، اگر component برداشته شود ، پس از به روزرسانی صفحه ، پاکسازی اجرا می شود.این نشان دهنده چگونگی نزدیک تر effects های خود است. در موارد نادری که ممکن است بخواهید به اجرای همزمان متکی شوید ، به جای آن می توانید به useLayoutEffect تغییر دهید.توجه داشته باشیدممکن است از شما سؤال شود که آیا این بدان معنی است که اکنون نمی توانید هشدارهای مربوط به setState را در مورد unmounted components برطرف کنید. نگران نباشید – به طور خاص برای این مورد بررسی کنید و هشدارهای setState را در فاصله کوتاهی بین برچیدن و پاکسازی فراخوانی نکنید. بنابراین درخواست ها یا بازه های لغو کد تقریباً همیشه یکسان هستند.علاوه بر این ، React 17 با توجه به موقعیت آنها در درخت ، توابع پاکسازی را به همان ترتیب اثرات انجام می دهد. پیش از این ، این سفارش گاها متفاوت بود.Potential Issuesما فقط دیده ایم که چند components با این تغییر و تحول شکسته اند ، اگرچه ممکن است کتابخانه های قابل استفاده مجدد برای آزمایش دقیق تر آن نیاز داشته باشند. یک نمونه از کد مشکل دار ممکن است به صورت زیر باشد:useEffect(() => { someRef.current.someSetupMethod(); return () => { someRef.current.someCleanupMethod(); }; });مشکل این است که برخی از Ref.current قابل تغییر است ، بنابراین تا زمانی که عملکرد پاک سازی اجرا شود ، ممکن است تنظیم null باشد. راه حل این است که هر مقدار قابل تغییر در effect را capture کنید:useEffect(() => { const instance = someRef.current; instance.someSetupMethod(); return () => { instance.someCleanupMethod(); }; });ما انتظار نداریم که این یک مشکل شایع باشد زیرا ما eslint-plugin-react-hooks/exhaustive-deps قانون lint (مطمئن شوید که از آن استفاده می کنید!) همیشه درباره این موضوع هشدار داده است.Consistent Errors for Returning Undefinedدر React 16 و قبل از آن ، بازگشت undefined همیشه خطایی بوده است:function Button() { return; // Error: Nothing was returned from render }این تا حدودی به این دلیل است که بازگشت undefined آسان است:function Button() { // We forgot to write return, so this component returns undefined. // React surfaces this as an error instead of ignoring it. <button />; }پیش از این ، React این کار را فقط برای کلاس ها و function components ها انجام داد است، اما return مقادیر forwardRef و memo کامپوننت ها را بررسی نکرده بود. این به دلیل یک خطای کد نویسی بود.در React 17 ، رفتار برای forwardRef و memo های پیش زمینه با function منظم و class components سازگار است. بازگشت نامشخص از آنها خطایی است.let Button = forwardRef(() => { // We forgot to write return, so this component returns undefined. // React 17 surfaces this as an error instead of ignoring it. <button />; }); let Button = memo(() => { // We forgot to write return, so this component returns undefined. // React 17 surfaces this as an error instead of ignoring it. <button />; });برای مواردی که می خواهید عمداً چیزی را ارائه ندهید ، به جای آن null شوید.Native Component Stacksوقتی خطایی را در مرورگر پرتاب می کنید ، مرورگر اثری از stack را با نام عملکرد JavaScript و locations آنها به شما می دهد. با این حال ، stack های JavaScript اغلب برای تشخیص مشکل کافی نیستند زیرا سلسله مراتب درخت React می تواند به همان اندازه مهم باشد. شما می خواهید بدانید نه تنها یک Button خطایی را ایجاد کرده است ، بلکه در کجای درخت React آن Button قرار دارد.برای حل این مشکل ، React 16 هنگام خطا چاپ ” component stacks” را شروع کرد. با این وجود ، آنها قبلاً نسبت به stacks های جاوا اسکریپت native پایین نبودند. به ویژه ، آنها در کنسول قابل کلیک نیستند زیرا React نمی دانست که عملکرد در کد منبع کجا اعلام شده است. علاوه بر این ، آنها عمدتا در تولید بی فایده بودند. بر خلاف stacks های معمولی جاوا اسکریپت که به طور خودکار می توانند به اسامی کارکرد اصلی با یک برگه اصلی برگردانده شوند ، با React component stacks باید بین stacks های تولید و اندازه بسته نرم افزاری را انتخاب کند.در React 17 ، stacks کامپوننت ها را با استفاده از مکانیسم متفاوتی ایجاد می شوند که آنها را از stacks های معمولی JavaScript بطور کامل متصل می کند. با این کار می توانید ردپاهای کاملاً نمادی React component stack را در یک محیط تولید به دست آورد.نحوه اجرای React تا حدودی غیرقابل توصیف است. در حال حاضر ، مرورگرها راهی برای به دست آوردن قاب stack یک تابع (source file and location) ارائه نمی دهند. بنابراین هنگامی که React خطایی را به خود جلب کند ، اکنون می توانید component stack خود را با throwing (و catching ) خطای موقتی از داخل هر یک از components های بالا ، هنگامی که امکان پذیر باشد ، بازسازی کنید. این یک جریمه عملکرد کوچک برای تصادفات اضافه می کند ، اما فقط یک بار در هر نوع component اتفاق می افتد.اگر کنجکاو هستید ، می توانید جزئیات بیشتری را در این درخواست کشش بخوانید ، اما بیشتر این مکانیسم دقیق نباید روی کد شما تأثیر بگذارد. از دید شما ، ویژگی جدید این است که component stacks اکنون قابل کلیک هستند (زیرا آنها به stack frames مرورگر native تکیه می کنند) ، و این که شما می توانید مانند خطاهای JavaScript معمولی ، آنها را در تولید رمزگشایی کنید.بخشی که تغییر مهمی را ایجاد می کند این است که برای این کار ، React قسمت هایی از برخی از React functions و constructors کلاس React را در stack پس از گرفتن خطا مجدداً اجرا می کند. از آنجا که عملکردهای رندر و constructors کلاس نباید عوارض جانبی داشته باشند (که این نیز برای ارائه سرور مهم است) ، این نباید مشکلی عملی ایجاد کند.Removing Private Exportsسرانجام ، آخرین تغییر مهم قابل توجه این است که ما تعدادی از داخلی های React را که قبلاً در معرض سایر پروژه ها قرار داشتند حذف کرده ایم. به طور خاص ، React Native برای وب به بعضی از داخلی های سیستم event وابسته بود ، اما این وابستگی شکننده بود و برای شکستن استفاده می شد.در React 17 ، این exports خصوصی حذف شده است. تا آنجا که ما آگاه هستیم ، React Native for Web تنها پروژه ای بود که از آنها استفاده می کرد و آنها قبلاً مهاجرت را به رویکرد دیگری انجام داده اند که به این exports خصوصی بستگی ندارد.این بدان معنی است که نسخه های قدیمی تر React Native برای وب با React 17 سازگار نیستند ، اما نسخه های جدیدتر با آن کار خواهند کرد. در عمل ، این تغییر چندانی نمی کند زیرا React Native برای وب مجبور بود نسخه های جدیدی را منتشر کند تا به هر حال با تغییرات داخلی React سازگار شود.علاوه بر این ، ما روش های کمکی ReactTestUtils.SimulateNative را حذف کرده ایم. آنها هرگز مستند نشده اند ، دقیقاً آنچه را که نام آنها نشان می دهد انجام نداده اند ، و با تغییراتی که ما در سیستم رویداد ایجاد کرده ایم کار نکردند. اگر می خواهید یک روش مناسب برای آتش زدن حوادث مرورگر بومی (fire native browser events )در تست ها باشید ، به جای آن ، از کتابخانه React Test استفاده کنید.Installationما شما را تشویق می کنیم تا به زودی سعی کنید نامزد کاندیدای React 17.0 را منتشر کنید و مشکلات دیگری را که ممکن است در هنگام مهاجرت با آنها روبرو شوید مطرح کنید. بخاطر داشته باشید که یک نامزد انتشار احتمالاً دارای اشکالات نسبت به یک نسخه پایدار است ، بنابراین هنوز آن را به production منتقل نکنید.برای نصب React 17 RC با npm ، اجرا کنید:npm install react@17.0.0-rc.0 react-dom@17.0.0-rc.0برای نصب React 17 RC با Yarn ، اجرا کنید:yarn add react@17.0.0-rc.0 react-dom@17.0.0-rc.0ما همچنین از طریق CDN ساخت React از UMD را ارائه می دهیم:<script crossorigin src=&quothttps://unpkg.com/react@17.0.0-rc.0/umd/react.production.min.js&quot> <script crossorigin src=&quothttps://unpkg.com/react-dom@17.0.0-rc.0/umd/react-dom.production.min.js&quot>برای راهنمایی های دقیق نصب ، به اسناد مراجعه کنید.ChangelogReactاضاافه کردن react/jsx-runtime و react/jsx-dev-runtime را برای تبدیل JSX جدید. (lunaruan@ در شماره #۱۸۲۹۹ )ساخت component stacks را از native error frames (sebmarkbage در شماره ۱۸۵۶۱#)دسترسی به مشخص کردن نام DisplayName در context برای improved stacks ها بهبود یافته است. (@ eps1lon در شماره ۱۸۲۲۴#)React DOMبه جای document ، events ها را به roots بزنید. (trueadm در شماره ۱۸۱۹۵ و دیگران)قبل از اجرای هر effects بعدی ، همه effects را تمیز می شود. (bvaughn در شماره ۱۷۹۴۷#)توابع پاکسازی useEffect را بصورت غیر همزمان اجرا می شود. (bvaughn در شماره ۱۷۹۲۵#)از focusin و focusout مرورگر برای و استفاده کنید. (trueadm در شماره ۱۹۱۸۶#)از همه Capture events استفاده کنید و از مرحله browser capture استفاده کنید. (trueadm در شماره ۱۹۲۲۱#)bubbling از event را تقلید نکنید. (gaearon در # ۱۹۴۶۴)اگر forwardRef یا memo component نامعلوم (undefined)برمی گردد ، پرتاب کنید. (gaearon در # ۱۹۵۵۰)حذف event pooling. (trueadm در شماره # ۱۸۹۶۹)جلوی exposing داخلی ها را بگیرید که توسط React Native Web نیازی به آن نخواهید داشت. (necolas در شماره ۱۸۴۸۳#)غیرفعال کردن console در render دوم رندر حالت DEV دو render. (sebmarkbage در # ۱۸۵۴۷)Deprecate شدن undocumented و misleading در SimulateNative و ای پی ها . (gaearon در شماره ۱۳۴۰۷)تغییر نام private field و نام مورد استفاده داخلی (gaearon در شماره ۱۸۳۷۷#)در حال توسعه با API Timing کاربر ارتباط نگیرید. (gaearon در شماره ۱۸۴۱۷#)غیرفعال کردن console در طول رندر تکراری در Strict Mode. (sebmarkbage در # ۱۸۵۴۷)در Strict Mode ، کامپوننت double-render را نیز بدون Hooks نیز ارائه می دهند. (@ eps1lon در شماره ۱۸۴۳۰#)در طی lifecycle methods با flushSync ارتباط برقرار کنید (اما هشدار دهید). (sebmarkbage در شماره ۱۸۷۵۹)code property را به event objects صفحه کلید اضافه شد. (@ bl00mber در شماره ۱۸۲۸۷#)ویژگی عناصر disableRemotePlayback را برای video elements اضافه شد. (tombrowndev در شماره ۱۸۶۱۹#)enterKeyHint property را برای input elements اضافه شد. (@ eps1lon در شماره ۱۸۶۳۴#)هنگامی که هیچ value به <Context.Provider> ارائه نشده است هشدار می دهید. (@ charlie1404 در شماره ۱۹۰۵۴#)هشدارچه موقعه memo یا forwardRef components برمی گرداند undefined . (bvaughn در ۱۹۵۵۰#)پیام خطا را برای به روزرسانی های نامعتبر بهبود یافته است. (JoviDeCroock در شماره ۱۸۳۱۶#)forwardRef و memo را از stack frames جدا شده است. (sebmarkbage در شماره ۱۸۵۵۹#)هنگام جابجایی بین ورودی های کنترل شده و کنترل نشده ، پیام خطا را بهبود بخشیده است. (vcarl در شماره ۱۷۰۷۰#)Fix setState در حال توسعه در داخل یک iframe بسته. (gaearon در شماره ۱۹۲۲۰#)Fix rendering کمکی برای lazy components با defaultProps رفع شده. (jddxf در شماره ۱۸۵۳۹#)فیکس یک غلط مثبت هشدار dangerouslySetInnerHTML که undefined است (@ eps1lon در شماره ۱۸۶۷۶#)رفع وسایل تست با غیر استاندارد require به اجرای دارد. (@ just-boris در شماره ۱۸۶۳۲#)رفع گزارش onBeforeInput از type نادرست. (@ eps1lon در # ۱۹۵۶۱)برای رویدادهای و از delegation استفاده کنید. (gaearon در # ۱۹۳۳۳)استفاده از memory را بهبود بخشیده شده است. (trueadm در شماره ۱۸۹۷۰#)React DOM Serverساخت useCallback مطابق با رفتار useMemo برای server renderer ایجاد شده است. (alexmckenley در شماره ۱۸۷۸۳#)رفع state leaking هنگام پرتاب یک function component . (pmaccart در شماره # ۱۹۲۱۲)React Test Rendererپیام خطای findByType را بهبود بخشید شد. (henryqdineen در شماره ۱۷۴۳۹#)منبع ترجمهما در سایتمون آموزش React js به زبان فارسی قراردادیم خوشحال میشیم به سایت سر بزنی و نظرت رو بگی:)