https://virgool.ir/feed/@lambdaxyztfa2026-11-12 08:24:09https://files.virgool.ir/upload/users/199028/avatar/oAL5OQ.jpeghttps://virgool.ir/@lambdaxyzthttps://virgool.ir/@lambdaxyzt/reactjs-واقعا-چجوری-کار-میکنه-oxx9f4ozhhe9سلام بر دوستان ... من در این مطلب سعی دارم توضیح کلی و دقیق بدم ... دنبال این هستم که خودم یک فهم خیلی خوب از react کسب کنم و بعد با به اشتراک گذاشتن بیشتر یاد بگیرم ... به نظرم هرچی بهتر و دقیق تر react رو بفهمیم اپلیکیشن های خفن تری میتونیم بسازید.اولا ریکت چیه ؟ ولش کنید میتونید خیلی جاهای دیگه بخونید کلی ازش تعریف کردن ... چیکار میکنه و این داستانا ... ولی تعریف خودم اینه که :مرورگر همه گیر شده و با JS داخل اون میشه خیلی کارا و logic ها پیاده سازی کرد ... کتابخانه برای ساخت *UI زیاد اومده یکیش مثل BackboneJS ولی خب react یه حرکتای جالب و جدیدی زد که برای مدیریت پیچیدگی های UI وب اپلیکیشن ها خیلی جوابه و بخوای همون رو توی BackboneJS بزنی داستاناش زیاد تره.( و * UI چیه همون سایته ولی برای اپلیکیشن ها باید هی تغییر کنه دیگه شما کلیک میکنید اطلاعات ببینید اطلاعات جدید باید اضافه بشه و نمایش داده بشه ... حالا ممکنه صفحه refresh بشه و توی صفحه جدید اطلاعات جدید رو ببینید و یا ممکنه JS دیتا رو از سرور بگیره توی مرورگر اضافه کنه و به شما نمایش داده بشه). و react میگه آقاجان DOM مرورگر که سنگینه بخوای مستقیم دست بزنی element بزاری برداری و attribute ها رو تغییر بدی چرا چون به ازای هر scroll کاربر یا click -ش روی دکمه یکسری چیزا تغییر باید کنه ... اضافه بشه یا حذف بشه ... شاید یک element متنش تغییر پیدا کنه و یوزر نبینه چون بعدش دوباره متنش عوض میشه ... بهتر بیایم element های که قراره نمایش داده بشه روی کاغذ بیاریم ( روی مموری ) (خیلی بهتر و سبک چون DOM مرورگر تغییر نمیکنه) چجوری ؟ میگیم render شون میکنیم که در اصل میایم یکسری object های جاوااسکریپت میسازیم البته با property های خیلی کمتر ( شما برید property هایی داخل مرورگر برای یک element رو ببینید هزارتاست ) ...و react element , در اصل میایم react element رو render میکنیم یعنی میایم یه object ساده میسازیم اون میشه react element ما ولی روی کاغذه ( روی مموریه ... ذهنیه انگار){ $$typeof : Symbol ( react.element ), type : 'div' key : null , props : { } , ref : null }ایناها این شکلیه برید امتحان کنید توی 1 ثانیه جاوااسکریپت میتونه هزارتا از اینا بسازه براتون ( برید تست کنید ) این چیه ؟ react element ... (اون typeof و symbol نمیدونم چیه ولی یه طرز تعریف یه property خاص و فک کنم مخفی , برای object های جاوااسکریپت هست) کتابخونه react این رو به عنوان react element در نظر میگیره و اون Symbol ( react.element ) رو میبینه میفهمه react element هست اگر اون نباشه کاری به کارش نداره ( آدم حسابش نمیکنه )البته state ها و اینا هستا ولی توی این object ها نیست چرا ؟ بعدا دقیق تر میشه گفت ولی با توجه به اونا یک react element ساخته یا همون render میشهخب این چه ربطی به مرورگر داره ؟ خب ReactDOM میاد میبینه این react element رو و یک element با تگ 'div' ( با توجه به همون type : 'div' ) میاد توی DOM مرورگر اضافه میکنه و شما یه element با تگ 'div' توی مرورگر میبینید. که شما با فک کنم createElement توی مرورگر هم میتونید اینکارو بکنید (یادم نیست متودش رو ) ... ReactArt میاد و react element با type به نام Text رو میگیره و یه متن رو توی canvas شما میکشه ...حالا اگر بخوایم این پایینی رو <div class = " loggdata "> </div>رو نشون بدیم توی react element-ش باید چجوری باشه ؟{ $$typeof : Symbol ( react.element ), type : 'div' key : null , props : { className : " loggdata " } , ref : null }>><div class = " loggdata "> server logs 2120/11/06 </div>فقط شما برای اینکه این object توی مموری ساخته بشه یعنی یک react element که render بشه باید چی بنویسید ؟import React from 'react' ; React.createElement( 'div' , { className : "loggdata" } , [ 'server logs 2120/11/06 ' ] ){ $$typeof : Symbol ( react.element ), type : 'div' key : null , props : { className : " loggdata " children : [ " server logs 2120/11/06 " ] } , ref : null }>> <div class=" loggdata " style="color:red;font-size:23px;" > server logs 2120/11/06 </div> ------- React.createElement( 'div' , { className : "loggdata" , style : { color : 'red' , fontSize : '23px' } } , [ 'server logs 2120/11/06 ' ] ) ------- { $$typeof : Symbol ( react.element ), type : 'div' key : null , props : { className : " loggdata " style : { color : 'red' , fontSize : '23px' } children : [ " server logs 2120/11/06 " ] } , ref : null }>> المنت های تو هم (nested)<div class=" loggdata " style="color:red;font-size:23px;" > server logs 2120/11/06 <i>Warning</i> </div> ----------- React.createElement( 'div' , { className : "loggdata" , style : { color : 'red' , fontSize : '23px' } } , [ 'server logs 2120/11/06 ' , React.createElement ( 'i' , { } , [ 'warning' ] ) ] ) ---------{ $$typeof : Symbol ( react.element ), type : 'div' key : null , props : { className : " loggdata " style : { color : 'red' , fontSize : '23px' } children : [ " server logs 2120/11/06 " , { $$typeof : Symbol ( react.element ), type : 'i' key : null , props : { className : " loggdata " children : [ " server logs 2120/11/06 " ] ref : null } ] } ] } , ref : null }خب با دقت به بالایی ها باید بفهمید چی به چیه این react element پس برای render یک المنت react ... به متد React.createElement باید type رو به عنوان اولین argument بدیم و شی از prop ها رو به دومین argument و لیستی از children ها رو به سومن argument که توی object -ِ المنت ریکت , children یکی از props هاست , دراصل توی ابجکت props میره ولی ما جدا به متود React.createElement پاسش دادیم.اگر توی argument دوم یعنی props بیایم کلید های ref و key رو تعریف کنیم react element دیگه مقدار کلیدهای key و ref رو برابر null نمیذاره مگر اینکه تعریف نکرده باشیمشونlambdaxyztlambdaxyztFri, 22 Oct 2021 13:07:29 +0330