ویژگی های برتر react

React یک کتابخانه از جاوا اسکریپت است که در بین برنامه نویسان از محبوبیت بسیار زیادی برخوردار است. این کتابخانه در اکو سیستم و برنامه سمت کاربر نقش بسیار مهم و اساسی دارد. همانطور که در مقاله ی دیگری در این مورد صحبت کردیم از کتابخانه React در توسعه‌ی وردپرس استفاده زیادی می‌گردد. حال برای بررسی بیشتر این کتابخانه و علت رشد آن در چند سال اخیر تصمیم گرفته این تا به بررسی ویژگی های react بپردازیم.

ویژگی های react

React یا همان reactjs دارای ویژگی های بسیاری محبوب و مهمی است. که باعث جلب توجه کاربران به این کتابخانه جاوا اسکریپ شدند.
برخی از این ویژگی ها عبارتند از:
JSX
Components
One-way Data Binding
Virtual DOM
Simplicity
Performance
است. حال برای شناخت هر چه بهتر هر کدام از این ویژگی ها به بررسی اجمالی آنها می پردازیم.

کدنویسی در react با JSX

Java script extention  یک افزونه کاربردی برای react است و به شما کمک می‌کند کدها را مانند کد html بنویسید. در واقع می‌توان گفت jsx یک فریمورک نیست؛ بلکه همان زبان جاوا اسکریپت است که با ساختار دستوری دیگری که در ایجاد کامپوننت و المان های مختلف برای react DOM کاربرد دارد. این افزونه به کمک ES6 توسعه پیدا می‌کند به طوری که کد های html و js را با استاندارد های مناسب در کنار یکدیگر میگذاریم. همین ویژگی است که باعث شده تا نوشتن کد های react  ویادگیری کدنویسی آن برای برنامه نویسان آسان شود.

ساختار react بر پایه Component ها

React یک کتابخانه بر اساس کامپوننت است. به نوعی میتوان گفت، می‌توانیم هر قسمت از وب سایت را به صورت کامپوننت های جداگانه ای تعریف کنیم و سپس از کنار هم قراردادن Component های تعریف شده وب سایت خود را طراحی کنیم.
یک ویژگی مهم دیگر در کامپوننت ها امکان استفاده مجدد و یا همان reusable بودن آن است؛ که به ما کمک می‌کند تا هنگام کار در پروژه هایی با اندازه های بزرگتر ساختار کد را حفظ کنیم.

طراحی یک سو یا One-way Data Binding

طراحی React به نوعی است که جریان داده ها را به صورت یک طرفه دنبال میکند. این ویژگی باعث امکان کنترل بیشتر و بهتر در سراسر برنامه شده است. و در همین راستا توانسته کمک زیادی به برنامه نویسان کند .همان طور که گفتیم، جریان داده در ری اکت یک طرفه تعریف شده اما اگر بخواهیم داده ها را در جهت دیگری استفاده کنیم باید از ویژگی دیگری کمک بگیریم. وهمین دلیل استفاده از کامپوننت ها ویژگی تغییر ناپذیری آنها و داده های درون آنهاست. اگر بخواهیم داده ها را یک طرفه نگه داریم از flux استفاده می‌کنیم. Flux این امکان را می‌دهد تا برنامه انعطاف پذیر تر و کارا تر باشد.

Virtual DOM در react

قبل از اینکه به بررسی این ویژگی از react بپردازیم بهتر است با برخی از اصطلاحات پایه ای آشنا شویم. تا در توضیح جامع تر این ویژگی دچار سردرگمی نباشیم.

تعریف DOM

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

بررسی ویژگی Virtual DOM

حال در react و به نوعی جاوا اسکريپت برای کندی DOM راه حل ویژه ای تعبیه شده است. به روشی که در ان با تغییر یک تگ، تنها خود آن و موارد دیگری که تحت تاثیر آن تگ قرار دارد بروزرسانی میشود؛ Virtual DOM می‌گویند. هر زمان UI برنامه ی جدیدی بارگذاري می شود، مجددا یک DOM به صورت مجازی ایجاد می گردد. سپس DOM قبلی وجدید باهم بررسی می‌شود و تنها تغییرات DOM جدید بر روی قبلی بارگذاری می‌شود. این کار باعث افزایش سرعت و عدم هدر رفت حافظه می‌گردد.

سادگی react

 

Simplicity یا سادگی react به دلیل داشتن دو ویژگی اساسی به وجود آمده است. درواقع افزونه JSX و کامپوننتی بودن آن دلیل سادگی react است. زیرا  قابلیت کدنویسی مشابه زبان html که زبانی قابل فهم است و رویکرد قابلیت استفاده مجدد برنامه که با استفاده از component ها ایجاد شده را داراست.

عملکرد مناسب

react از نظر کارایی نسبت به فریمورک های موجود خیلی مناسب تر عمل کرده است. و دلیل کارایی مناسب آن را می‌توان مدیریت Virtual DOM دانست. زیرا DOM کاملا در حافظه قرار دارد؛ اما زمانی که ما یک Component تعریف میکنیم؛ مستقیما تغییرات بر روی DOM اصلی اعمال نمی‌شود بلکه ابتدا این موارد برروی یک DOM مجازی ایجاد می شود. سپس هر دو DOM موجود مورد قیاس قرار میگیرند و در انتها هر تنها تغییرات هستند که برروی DOM اصلی قرار میگیرند. به همین دلیل توانسته سرعت را افزایش دهد و کارایی مناسبی داشته باشد.

نتیجه گیری

در انتها باید بگوییم، react برنامه ریزی شده توسعه یافته و با توجه به امکانات کلیدی و مورد استفاده ای که ارائه داشته استحقاق جایگاه کنونی خود در بین برنامه نویسان را دارد. و میتوان گفت باید روز به روز منتظر پیشرفت آن و یادگیری و فراگیر شدن بیشتر react در جهان وب باشیم.