React 17 منتشر شد – چه ویژگی‌های جدیدی در React وجود دارد؟

React 17 به تازگی منتشر شده و این مقاله آن را با جزییات زیادی پوشش می‌دهد. می‌خواهیم بحث کنیم که چه تغییرات عمده‌ای ایجاد کرده و چگونه به عنوان یک توسعه دهنده React بر شما تأثیر می‌گذارد.

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

اولین ضربه بزرگ این است که هیچ ویژگی جدیدی در این نسخه React وجود ندارد. از آنجا که این یک نسخه Release Candidate است، مشخص است که هیچ قابلیتی در نسخه 17.x وجود ندارد. این بدان معناست که هر ویژگی جدیدی در React 18 به بعد به وجود خواهد آمد.

ایمپورت ری‌اکت لازم نیست

این یک کاربرد خوب است، چیزی که Next.js مدتی است آن را دنبال می‌کند. قطعه کد زیر را در نظر بگیرید:

export default function Home() {
    return <h1>Hello</h1>
}

اگر سعی کنید از این به عنوان یک کامپوننت در React 16 یا نسخه قبل‌تر از آن استفاده کنید، خطایی رخ می دهد که ری‌اکت یافت نشد. حتی اگر در اینجا اصلا از متغیر React استفاده نکنید. دلیل این است که این JSX در واقع به موارد زیر کامپایل شده است:

"use strict";

exports.__esModule = true;
exports.default = Home;

function Home() {
  return /*#__PURE__*/React.createElement("h1", null, "Hello");
}

ببینید چه اتفاقی افتاده است؟ JSX شما به چیزی کامپایل شده است که از ری‌اکت استفاده می‌کند. حالا به دلیل اینکه ری‌اکت دامنه‌ یا اسکوپی نداشت، با خطا روبه رو شدید.

در این مورد مشکلی با React 17 نیست. React 17 به طور خودکار ری‌اکت را در دامنه تزریق می‌کند.

تغییرات Event Delegation

پیش از این ری‌اکت از قرارداد زیر پیروی می‌کرد، به کد نگاهی بیندازید:

<button onClick={handleClick}>Button</button>

وقتی این کد را می‌نویسید، ری‌اکت در واقع شنونده رویداد کلیک را روی شی document متصل می‌کند و هر زمان که روی دکمه کلیک می‌کنید، DOM در واقع شنونده رویداد را روی آن فراخوانی می‌کند و سپس ری‌اکت رویداد را فراخوانی می‌کند.

درReact 17 ، اکنون شنونده رویداد را در rootNode شما از درخت پیوست می‌کند، یعنی عنصری که در فراخوانی ReactDOM.render می‌گذارید. این تصویر آن را بهتر توصیف می‌کند:

بدون تجمع رویداد

این ویژگی مورد علاقه من در React 17 است. رویدادها دیگر جمع نمی‌شوند. معنی آن چیست؟ کد ری‌اکت زیر را در نظر بگیرید:

function Home() {
    function handleChange(e) {
      setTimeout(() => {
      	console.log(e.target) // ERROR in React 16 and below
      }, 2000)
    }
    
    return <button onClick={handleChange}>Hello</button>
}

کد فوق در React 16 و ورژن پایین‌تر با مشکل مواجه خواهد شد، زیرا e یعنی شی event رویداد جمع شده است یعنی در رویدادهای مختلف به اشتراک گذاشته شده است. بنابراین این امکان وجود دارد که تا زمان setTimeout در واقع تابع پاسخگوی شما را فعال کند. شی e در واقع توسط رویداد دیگری مورد استفاده قرار می‌گیرد و آن چیزی نیست که انتظار دارید.

این مسئله در React 17 با تغییر اینکه دیگر هیچ رویدادی جمع نمی‌شود، برطرف شده است. این بدان معناست که شی شما منحصر به فراخوانی رویداد است. خیلی کاربردی است!

تغییرات دیگر

1. زمان‌بندی پاک کردن اثر - تابع callback از useEffect هنگام غیرفعال شدن کامپوننت، به جای اجرای همزمان که قبلا اتفاق می‌افتاد، اکنون به صورت غیرهمزمان اجرا می‌شود.
2. پشته‌های بومی کامپوننت بهتر
3. برخی از تغییرات اکسپورت داخلی خصوصی

جمع‌بندی

من برای ری‌اکت و آنچه که به ارمغان می‌آورد هیجان زده‌ام. حالت تعلیق و همزمانی نیز در آن قرار دارد. باید منتظر بمانیم و ببینیم که در React 18 و نسخه‌های بعدی چه تغییراتی دارد.

امیدوارم از خواندن این مقاله لذت کافی را برده باشید. در صورت تمایل، نظرات خود را در بخش زیر با ما در میان بگذارید.

منبع