ReactJS – همه چیز درباره DOM مجازی و آشتی

در این مقاله به بحث خواهیم پرداخت DOM مجازی و اصلاح که مفاهیم کمی برای توسعه دهندگان شناخته شده است ReactJS، اما با این وجود قلب ابزار آنها را تشکیل می دهند. من این مفاهیم را برای شما تعریف می کنم و شما با استفاده از مثال هایی آنها را توضیح می دهید تا یک بار برای همیشه مه را از بین ببرید!

بسیاری از مردم بر این باورند که راز موفقیت ReactJS در استفاده از آن نهفته است DOM مجازی و دومی به آن a می دهد سرعت برتر از DOM! در واقعیت، این کاملاً درست نیست. با کمال تاسف از اینکه شما را ناامید کردم، React «سریع‌تر» از DOM نیست. این مساوی است با گفتن اینکه می‌توان سریع‌تر از سرعت نور رفت. بیایید نگاهی دقیق تر به چرایی استفاده React از Virtual DOM بیندازیم.

من پیشاپیش به شما اطمینان می دهم، اگر بار اول تمام مفاهیمی که در این مقاله به آنها پرداخته شده است را متوجه نشدید، طبیعی است. وارد روده های جانور خواهیم شد ReactJS برای درک نحوه عملکرد آن برای دنبال کردن من آماده ای؟ پس چراغ قوه خود را بردارید و بیایید آن را روشن کنیم DOM مجازی و اصلاح!

DOM و Virtual DOM را با هم اشتباه نگیرید. THE DOM نمایشی از ساختار و محتوای یک صفحه وب است. مرورگر می تواند DOM را به منظور دستکاری کند تغییر نمایشگر از یک صفحه از سوی دیگر، DOM مجازی تنها یکی است کپی 🀄 از DOM به عنوان یک شی جاوا اسکریپت.

ReactJS یک کتابخانه است که بر اساس اصل ساخته شده است UI حالت محور (یا رابط کاربری دولتی به زبان فرانسوی ساده). THE تغییر حالت یک جزء منجر به رندر مجدد رابط کاربری می شود. جزء و همچنین همه فرزندانش سپس توسط DOM دوباره ارائه می شوند. بسته به تعداد عملیات انجام شده توسط DOM، این مرحله می تواند باشد بسیار گران قیمت که دلالت بر آن دارد عملکرد ضعیف.

در واقع، React قرار نیست از DOM بخواهد که کل UI را دوباره رندر کند، بلکه قرار است روی DOM مجازی فراخوانی کند. هدف واقعی Virtual DOM این است که تعداد عملیات را به حداقل برسانید که DOM باید به دست آورد.

بنابراین DOM مجازی دو مزیت دارد:

1. را بهبود می بخشدUX (تجربه کاربر) با بهبود عملکرد برنامه.
2. را بهبود می بخشد DX (تجربه توسعه دهنده) با ایجاد یک انتزاع در دستکاری DOM، این امکان را فراهم می کند که در مورد مسائل تجاری و نه در مورد مسائل مدیریت DOM نگران باشید. برای مدیریت تغییرات حالت نیازی به شکستن سرتان نیست، React از آن مراقبت می کند.

اکنون که دیدیم Virtual DOM در تئوری چیست، بیایید به سراغ عمل برویم.

همانطور که قبلا گفته شد، Virtual DOM یک شی جاوا اسکریپت است. اما به چه صورت است؟

کد React زیر را به عنوان مثال در نظر بگیرید:

export default function Counter() {
    const [count, setCount] = useState(0);

    return (
        <>
            <p>Ceci est un compteur</p>
            <button onClick={() => setCount((count) => count + 1)}>
                Total : {count}
            </button>
        </>
    )
}

این کد رابط زیر را نشان می دهد:

شما یک جزء متشکل از یک قطعه React با یک پاراگراف و یک دکمه دارید. وقتی روی دکمه کلیک می کنید، شمارنده افزایش می یابد.

شما می توانید کد بالا را به صورت زیر مشاهده کنید:

const element = React.createElement(
    React.Fragment,
    null,
    React.createElement("p", null, "Ceci est un compteur"),
    React.createElement("button", null, "Total : 11"),
)

و این چیزی است که DOM مجازی :

توجه شما را به ویژگی typeoff شی فوق جلب می کنم:

$$typeof: Symbol(react.element)

در React، هر عنصری که DOM را تشکیل می دهد a است React Element. اینها عناصری هستند که در Virtual DOM قرار می گیرند.

بر روی یک donc a درخت (DOM مجازی) که از گره ها (ReactElement). اگر تا به حال به این موضوع دقت کرده باشید، احتمالاً می دانید که در واقعیت، گره ها واقعاً نیستند React Element به طور دقیق، اما الیاف. برای ساده‌تر شدن، در اینجا React Element را می‌گوییم.

اکنون می دانیم که Virtual DOM چیست و چگونه به نظر می رسد، اما واقعاً نمی دانیم که چگونه در ReactJS استفاده می شود.

گفتیم، DOM مجازی یکی از ویژگی های React نیست. او بیشتر یک است ابزار امکان راه اندازی استراتژی بهینه سازی.

بیایید ببینیم روند به روز رسانی UI چگونه کار می کند. دو عملیات ممکن وجود دارد. یا مقداردهی اولیه کنید یا به روز کنید.

مقداردهی اولیه

در طول رندر برتر، React درخت DOM مجازی را ایجاد می کند که نمایانگر UI و سهام توسط است حافظه.

بنابراین در مثال ما درخت زیر را خواهیم داشت:

به روز رسانی

وقتی یک état تبدیل به یکی از React Element، نسخه دیگری از DOM مجازی ایجاد شده است. بنابراین ما به پایان می رسیم درخت فعلی که نسخه قدیمی در حافظه ودرخت به روز رسانی که درخت با به روز رسانی های درخواستی است.

در مثال قبلی، وقتی روی دکمه کلیک می‌کنید، شمارنده شمارش را افزایش می‌دهید. بنابراین نسخه جدیدی از درخت با متن دکمه به روز شده تولید می شود.

بنابراین ReactJS می تواند یک داشته باشد نمایندگی رابط کاربری با صدا وضعیت فعلی ووضعیت پس از تغییرات درخواست شده توسط کاربر بسیار خوب، شما می توانید بگویید، React دو درخت در حافظه دارد، اما چگونه DOM را به روز می کند؟

پاسخ ساده است، React مرحله را فراخوانی می کند اصلاح. اما بله، شما کلمه ای را که در مقدمه زیاد با شما صحبت نکرد را به یاد دارید! بابت طولانی شدن این تعلیق عذرخواهی می کنم، بنابراین بدون هیچ مقدمه ای، خانم ها و آقایان، لطفاً راه را برای اصلاح.

را اصلاح مرحله تشخیص تغییرات UI و اعمال آنها در DOM است. همانطور که دیدیم، React یک a را ایجاد می کند اجرای دوم رابط مجازی پس از اصلاح چیزی که باید در نظر داشته باشید این است که Virtual DOM در هیچ زمانی یک نمایش واقعی نیست و هیچ چیزی روی صفحه نمایش داده نمی شود. React فقط دو نمایش در حافظه از حالت رابط دارد. بنابراین React باید عناصری را که تحت تأثیر تغییرات قرار گرفته اند را به دقت شناسایی کند. برای این منظور، React از a استفاده می کند الگوریتم مقایسه.

الگوریتم مقایسه

این الگوریتم دو درخت (درخت فعلی و درخت به‌روزرسانی) می‌گیرد و پردازش زیر را به صورت بازگشتی برای هر دو درخت اعمال می‌کند:

هنگامی که الگوریتم به همه گره ها منتقل می شود، React تغییرات بین دو نمایش مجازی DOM را می داند.

اعمال تغییرات در DOM

پس از الگوریتم مقایسه، React دارای یک است لیست تغییرات برای تبدیل DOM انجام دهید. React از کتابخانه استفاده می کند واکنش DOM برای اعمال این تغییرات در DOM 🔗 React Dom NPM.

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

برای بهبود این موضوع، در طول نسخه 16، React این سیستم را بازسازی کرد و راه حلی برای آن پیشنهاد کرد الگوریتم فیبر.

به لطف الگوریتم فیبر، تغییراتی که باید در رابط کاربری ایجاد شود دیگر به صورت همزمان انجام نمی شود، بلکه نامتقارن. هر اصلاح به عنوان یک مشاهده می شود واحد کار، با وضعیت و اولویت. تمامی واحدهای کاری می توانند باشند منقطع، تکرارها یا لغو شد. بنابراین می توانید واکنش نشان دهید برای اولویت بندی تغییرات عمده و کم اهمیت تر را به پس زمینه می برد.

اگر می خواهید عمق الگوریتم فیبر را کشف کنید، پیشنهاد می کنم مقالات زیر را مطالعه کنید:
🔗 مقدمه ای بر React Fiber – الگوریتم پشت React

🔗 Inside Fiber: مروری عمیق بر الگوریتم آشتی جدید در React

پس از خواندن این مقاله، باید درک بهتری از آن داشته باشید DOM مجازی همچنین اصلاح که دو مفهوم پشت React هستند. ما به درون روده های کتابخانه فرو رفتیم تا بفهمیم چگونه کار می کند.

بنابراین، ما دیدیم که DOM مجازی یک ویژگی نیست، بلکه ابزاری است که ReactJS برای راه‌اندازی خود به آن متکی است استراتژی به روز رسانی DOM. Virtual DOM امکان دستکاری اشیاء و نه DOM را مستقیماً امکان پذیر می کند. بنابراین، React می‌تواند تعداد اقداماتی را که باید در DOM انجام شود، بهینه‌سازی کند. جفت شده در مرحله اصلاح، ما یک روش بسیار کارآمد برای انجام بسیاری از اقدامات در رابط کاربری به روش بهینه دریافت می کنیم.

ما همچنین دیده ایم که DOM مجازی برای React حیاتی است زیرا به اصطلاح یک کتابخانه است UI حالت محور. ReactJS سریعتر از DOM نیست، اما برای کتابخانه ای از این نوع به خوبی بهینه شده است، که آن را معروف می کند!

به لطف Virtual DOM React به ما این امکان را می دهد که به جای تمرکز بر جزئیات فنی مانند به روز رسانی DOM، روی آنچه واقعاً مهم است، تجربه کاربر تمرکز کنیم.

راز ReactJS این است که ترکیبی شیرین بین الف به ما ارائه دهد DX با کیفیت و الف UX بهینه شده