InfernoJS 6.0.0 : یک کتابخانه React برای ساخت رابط‌های کاربری با کارایی بالا

جامعه InfernoJS از انتشار نسخه 6.0.0 این کتابخانه خبر داد. این نسخه، بکارگیری Fragmentها را به همراه دارد که شما با استفاده از آن‌ها می‌توانید بدون اضافه کردن nodeهای اضافی به DOM، لیستی از کامپوننت‌های فرزند را با هم گروه کنید. سه متد جدید به همراه چند تغییر دیگر، در این نسخه اضافه شده‌اند: createRef، forwardRef و renderer.

اضافه شدن پشتیبانی Fragmentها

پشتیبانی Fragmentها، یعنی نوعی جدید از VNode در این نسخه اضافه شده است. این قابلیت شما را قادر می‌سازد تا بدون اضافه کردن nodeهای اضافی به DOM، لیستی از کامپوننت‌های فرزند را با هم گروه کنید. با استفاده از Fragmentها، شما می‌توانید آرایه‌ای را رندر کردن کامپوننت برگردانید، و در نتیجه یک لایه نامرئی بسازید که محتویات خود را با هم گره می‌زند، اما هیچ محفظه‌ای را به DOM واقعی رندر نمی‌کند.

Fragmentها می‌توانند به این ۴ روش ساخته شوند:

• API بومی Native: createFragment(children: any, childFlags, key?: string | number | null)
• JSX: … >, …. or …
• اِی‌پی‌آی createElement: creataeElement(Inferno.Fragment, {key: ‘test’}, …children)
• اِی‌پی‌آی Hyperscript: h(Inferno.Fragment, {key: ‘test’}, children)

اِی‌پی‌آی createRef

Refها راهی برای دسترسی به nodeهای DOM یا عناصر React که در متد رندر ساخته شده‌اند، فراهم می‌کند.

حال شما می‌توانید از createRef() برای ساخت refها استفاده کنید و آن‌ها را از طریق صفت ref به عناصر React متصل کنید. این متد جدید شما را قادر می‌سازد تا سینتکس مرتب‌تری بنویسید و وقتی که هیچ callbackای به DOM نیاز نیست، کد خود را کاهش دهید.

اِی‌پی‌آی forwardRef

اِی‌پی‌آی forwardRef شما را قادر می‌سازد تا یک ref را داخل یک کامپوننت تابعی به سمت جلو پیش ببرید. اگر می‌خواهید ارجاعی به یک عنصر مشخص داخل کامپوننت‌های تابعی ساده انجام دهید، این متد جدید کاربردی خواهد بود. به جلو پیش بردن refها یعنی این که به طور خودکار یک ref را از طریق یک کامپوننت، به یکی از فرزندانش منتقل کنید.

رندر کننده (renderer)

با کمک متد renderer، تمام فراخوانی‌های setState سریعا رندر خواهند شد. شما می‌توانید از آن در مواردی که مدت زمان رندر کردن برایتان مهم است، یا برای ساده‌سازی آزمایش‌ها استفاده کنید.

Lifecycle جدید

متدهای lifecycle قدیمی، componentWillMount، componentWillRecieveProps یا componentWillUpdate وقتی که متدهای lifecycle به نام getDerivedStateFromProps یا getSnapshotBeforeUpdate تحت استفاده قرار دارند، فراخوانی نخواهند شد.

تغییرات مهم کدام هستند؟

• از آنجایی که تمام برنامه‌ها به رندر کردن سمت سرور نیاز ندارند، hydrate حال بخشی از پکیج inferno-hydrate است.
• ویژگی‌های استایل حال از hyphen استفاده می‌کنند. برای مثال backgroungColor => background-color.
• در جهت پشتیبانی از سینتکس JSX Fragment، حال babel-plugin-inferno به babel نسخه 7 تکیه می‌کند.
• متد lifecycle به setState تغییر نام یافته است، تا سازگاری بهتری با ReactJS داشته باشد. همچنین، حال componentDidUpdate بعدها در زنجیره lifecycle، و پس از این که refها ساخته شده‌اند، فعال خواهد شد.
• Refهای رشته‌ای کاملا حذف شده‌اند. در عوض، شما می‌توانید از refهای callback، یعنی اِی‌پی‌آی createRef یا refهای forward استفاده کنید.

نکات دیگر درباره انتشار InfernoJS را می‌توانید بر روی صفحه گیت‌هاب آن مشاهده نمایید.

منبع