React гэж юу вэ ?

React нь “вэб хуудас зурдаг library” гэхээсээ илүү “UI-ийн төлөв өөрчлөгдөх үед browser-ийн real DOM-ийг яаж хамгийн зөв, зохион байгуулалттай update хийх вэ гэдгийг удирддаг system” гэж ойлгож болно.

Энгийн HTML, CSS, JavaScript ашиглавал чи DOM-ийг өөрөө шууд удирдана. Жишээ нь button дээр дарахад текст солих хэрэгтэй бол document.querySelector, textContent, appendChild, removeChild гэх мэтээр browser-ийн real DOM-той шууд ажиллана. Энэ арга жижиг үед ойлгомжтой. Харин page томроод state ихсээд ирэхээр аль хэсэг нь ямар data-аас хамаарч өөрчлөгдөж байгааг гараараа удирдах төвөгтэй болдог. React яг энэ асуудлыг шийдэх гэж гарч ирсэн.

React-д чи browser-д “энэ div-ийг аваад текстийг нь ингэж соль” гэж шууд заадаггүй. Харин “одоогийн state ийм байгаа үед UI ийм харагдах ёстой” гэж component-аар дүрсэлж өгдөг. Үүнийг declarative approach гэдэг.

Энд чи button-ийн text-ийг гараараа өөрчлөх код бичээгүй. Зүгээр л “count ямар байна, button дотор тэр утгыг харуул” гэж хэлж байна. setCount(1) дуудагдахад React component-ийг дахин ажиллуулна. Дахин ажиллуулах үед component шинэ UI description буцаана. React өмнөх UI description болон шинэ UI description хоёрыг харьцуулж үзээд зөвхөн өөрчлөгдсөн хэсгийг real DOM дээр update хийнэ.

JSX гэдэг нь үнэндээ HTML биш. Browser JSX-ийг шууд ойлгодоггүй. Жишээ нь:

Энэ код build хийх үед JavaScript object болж хувирна. Ойролцоогоор ингэж ойлгож болно:

Тэгэхээр React component гэдэг нь эцсийн дүндээ “UI ямар байх ёстойг тайлбарласан object” буцаадаг function гэж ойлгож болно.

Жишээ нь:

Энэ нь browser дээр шууд HTML үүсгэж байгаа биш. React эхлээд иймэрхүү JavaScript tree үүсгэнэ:

Үүнийг ихэнхдээ Virtual DOM гэж тайлбарладаг. Virtual DOM гэдэг нь browser-ийн жинхэнэ DOM биш. Зүгээр л memory дотор байгаа JavaScript object tree. Энэ tree нь “UI яг одоо ямар байх ёстой вэ?” гэдгийг илэрхийлдэг.

React-ийн ажиллах үндсэн урсгал нь ийм. Эхлээд component function ажиллана. Дараа нь JSX-ээс React element object үүснэ. Тэр object-уудаас UI tree бий болно. React тэр tree-г browser-ийн real DOM руу хөрвүүлж зурна. Дараа нь state эсвэл props өөрчлөгдвөл component дахин ажиллана. Шинэ tree үүснэ. React хуучин tree болон шинэ tree-г харьцуулна. Энэ харьцуулах процессыг reconciliation гэж нэрлэдэг. Харьцуулсны дараа React зөвхөн өөрчлөгдсөн хэсгийг real DOM дээр update хийнэ.

React-ийн гол санаа нь “UI бол state-ийн үр дүн” гэсэн ойлголт юм.

Өөрөөр хэлбэл:

State өөрчлөгдвөл UI дахин тооцоологдоно. Гэхдээ browser-ийн бүх page-ийг устгаад дахин зурдаггүй. React аль хэсэг өөрчлөгдсөнийг олж, хэрэгтэй DOM operation-уудыг л хийдэг.

Component гэдэг нь low level талаасаа function юм. Гэхдээ жирийн function-оос ялгаатай нь React тэр function-ийг өөрийн render cycle дотор удирдаж ажиллуулдаг. Жишээ нь:

Энэ component-ийг React дуудах үед h1 element-ийн description үүснэ. Дараа нь React DOM тэр description-оос real DOM node үүсгэнэ.

Энд нэг чухал зүйл нь react болон react-dom хоёрын ялгаа. react package нь component, state, hooks, element гэх мэт core logic-ийг өгдөг. Харин react-dom нь React-ийн үүсгэсэн UI description-ийг browser-ийн real DOM дээр буулгадаг хэсэг. Тийм учраас React зөвхөн browser-т зориулсан зүйл биш. React-ийн core санааг өөр орчинд ч ашиглаж болдог. Жишээ нь React Native нь mobile app-ийн native UI руу render хийдэг.

useState-ийг low level талаас нь ойлговол React component бүрийн state-ийг дотроо хадгалж байдаг. Чи component дотор:

гэж бичихэд React тухайн component-ийн state slot үүсгэнэ. Анхны render дээр count нь 0 байна. Харин setCount(1) дуудагдахад React “энэ component-ийн state өөрчлөгдлөө, дахин render хийх хэрэгтэй” гэж тэмдэглэнэ. Дараагийн render дээр count нь 1 болно. Ингээд component шинэ UI буцаана.

Эндээс нэг анхаарах зүйл гарна. React component дахин дахин ажиллаж болно. Тиймээс component дотор шууд side effect хийх нь аюултай байж болно. Жишээ нь API дуудах, event listener нэмэх, timer эхлүүлэх гэх мэт зүйлсийг component-ийн үндсэн body дотор шууд хийхгүй. Ийм зүйлд useEffect ашигладаг. Учир нь useEffect нь render дууссаны дараа ажиллах side effect-ийг зохицуулдаг.

React-ийн render гэдэг нь заавал browser дээр юм зурж байна гэсэн үг биш. Render гэдэг нь component function-ийг ажиллуулаад UI description гаргаж авах процесс. Харин commit phase гэдэг нь тэр өөрчлөлтийг real DOM дээр бодитоор хийх үе гэж ойлгож болно.

Жишээ нь count 0 байхад React ийм UI description авна:

Дараа нь count 1 болоход:

React харьцуулж үзээд button өөрөө хэвээрээ байна, зөвхөн children буюу text нь өөрчлөгдсөн байна гэж ойлгоно. Тэгээд browser-ийн real DOM дээр зөвхөн text node-ийг update хийнэ.

List render хийх үед key яагаад хэрэгтэй вэ гэдэг нь бас reconciliation-тэй холбоотой. React хуучин list болон шинэ list-ийг харьцуулахдаа item бүрийг таних хэрэгтэй болдог. Хэрвээ key байхгүй эсвэл буруу байвал React аль item шинээр нэмэгдсэн, аль item устсан, аль item байрлалаа сольсон гэдгийг буруу ойлгож магадгүй. Тиймээс map хийх үед stable key өгөх хэрэгтэй.

Жишээ нь:

Энд product.id нь React-д тухайн item-ийг таних identity болж өгнө.

Props бол parent component-оос child component руу дамжуулж байгаа data. State бол component өөрөө дотроо хадгалж, өөрчлөлт гарвал дахин render үүсгэдэг data. Props өөрчлөгдвөл child component дахин render хийгдэнэ. State өөрчлөгдвөл тухайн component болон түүнээс хамаарах child components дахин render хийгдэж болно.

React-ийн нэг том давуу тал нь UI-г жижиг component-ууд болгож задлах боломж юм. React дээр бол component бүр UI tree-ийн нэг хэсгийг үүсгэдэг function. Том page гэдэг нь олон жижиг function-ууд нийлээд нэг том UI tree үүсгэж байгаа хэрэг.

React энэ кодыг хараад Header, ProductList, Footer component-уудыг тус тусад нь ажиллуулна. Тэд тус бүр өөрийн UI description-ийг буцаана. Эцэст нь бүгд нийлээд нэг tree болно.

Next.js дээр чи page.tsx файл дотор component бичдэг. Үнэндээ Next.js өөрөө React дээр суурилсан framework. React нь UI component-ийн logic-ийг өгнө. Next.js нь routing, server rendering, file structure, API route, optimization зэрэг илүү том application-level боломжуудыг нэмдэг.

Товчхондоо, React low level дээр дараах ажлыг хийдэг гэж ойлгож болно. Component function-уудыг ажиллуулна. JSX-ийг UI object tree болгож авна. State болон props өөрчлөгдөхөд component-ийг дахин render хийнэ. Хуучин tree, шинэ tree хоёрыг reconciliation хийж харьцуулна. Дараа нь хэрэгтэй өөрчлөлтүүдийг real DOM дээр commit хийнэ. Ингэснээр developer DOM update-ийг гараараа удирдахгүй, харин state-д үндэслэсэн UI бичдэг болно.

Хамгийн энгийнээр хэлбэл React бол “data өөрчлөгдөхөд UI-г яаж зөв шинэчлэх вэ?” гэдэг асуудлыг шийддэг library юм. Чи UI ямар харагдах ёстойг component-аар бичнэ. React тэр component-уудыг ажиллуулж, browser дээр ямар DOM өөрчлөлт хийхийг өөрөө тооцоолдог гэж ойлгож болох нь ээ .