React хук

React 16.8 хувилбараас компонентийг Component классаас удамшуулахгүйгээр энгийн функц хэлбэрээр буюу функционал компонентийг бичих боломж бий болсон.
React компонентийн ажиллагааны үндэс бол төлвийн удирдлагад оршдог. Өөрөөр хэлбэл компонентийн төлвийг тодорхойлсон обьектийн аль нэгэн эсхүл бүхэлд нь өөрчлөлт ороход React энэ төлвөөс хамааралтай дэлгэцийн хэсгийг дахин зурдаг. Бид өмнөх хичээлүүдэд ашиглаж байсан Component классаас удамшсан компонентийн төлвийг өөрчлөхдөө this.setState({ pageTitle: newTitle }) гэх байдлаар setState аргыг ашиглаж байсан.

Арга ажиллан төлвийг өөрчилсөний дараа компонентийн render арга автоматаар дуудагдан компонентийг дахин зуран харуулдаг. Энд setState, render аргууд суурь Component классаас удамшдаг.
React 16.8 хувилбараас функционал компонентод шилжсэн. Өөрөөр хэлбэл компонентийг Component классаас удамшуулахгүйгээр энгийн функц байдлаар тодорхойлох болсон. Үүний давуу тал гэвэл функцтэй ажиллах нь энгийн бөгөөд ямар нэгэн классаас удамшихгүй тул компьютерийн нөөцийг бага зарцуулна. React -ийн динамик ажиллагааг функционал компонентод хангах үүднээс hook бий болсон. Хукууд бол компонентод ашиглаж болох React сангийн бие даасан функцууд юм.
hook -уудийг шинэ төсөл үүсгэн судлая. Төслийг хэрхэн үүсгэхийг react програм үүсгэх хичээлээс үзээрэй.
Төслөө үүсгээд ашиглахгүй файлуудыг устган

цэвэрлэгээ хийгээрэй. Төслийн хэвжүүлэлтийг bootstrap -аар хийе. Үүний тулд index.html файлд

bootstrap -ийн CDN холбоосыг оруулан өгөөрэй. App компонентод төслийн ажиллагааг шалгах зорилготой div  -ийг оруулсан байгаа. Төслийн компиляцийг хийвэл

гэж харагдана. Төслөө үүсгэн бэлтгэсэн тул дараагийн хичээлээс хукуудийн судалгааг хийх болно.

Жич: React 16.8 хувилбараас хойш Component классаас удамшсан компонентийг үүсгэж болохгүй гэж ойлгож болохгүй. Урьдын адилаар Component классаас удамшуулан компонентийг үүсгэн ашиглаж болох ч функционал компонентийн код илүү энгийн, өргөтгөх боломж, ажиллагааны оновчтой байдлыг ашиглахын тулд функционал компонент, хукуудийн талаар мэдэн тэдгээрийг ашиглаж сурсан байх хэрэгтэй.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 637 Төлбөртэй

React компонентод тулгуурласан тул програмийн бүх элементүүд компонентуудын харьцаа байдаг тул компонентод параметр дамжуулан удирдах зайлшгүй шаардлага гарч ирнэ. Энэ тухай Компонент гэж юу болох хичээлээр өнгөцхөн үзсэн бөгөөд энэ хичээлээр сэдвийг илүү гүнзгийрүүлэн авч үзье.

  Нээгдсэн тоо: 999 Бүртгүүлэх

Өмнөх Компонент гэж юу болох хичээлд бид react дээр програмийн кодийг бичихдээ react -ийг index.html файлд оруулан ирэн шууд ашигласан. Програмийн кодийг нэг файлд бүгдийг бичих, кодийг шалгах ажиллагаа, jsx -ийн компиляцийг хийхдээ babel санг нэмэлтээр оруулан ирэх зэрэг нь тийм сайн практик биш тул програм үүсгэх ажиллагааг автоматжуулсан хэрэгслийг react -ийг бүтээгчид боловсруулсан. Дурын хайлтын /жишээ нь google/ системээр create react app мөрийг хайлгавал хэрэгслийг эхний мөрүүдэд олон ирнэ.

  Нээгдсэн тоо: 929 Төлбөртэй

Vue төсөл бүхэлдээ компонентуудаас бүрдэн ажилладаг тул компонент ухагдхууныг сайн ойлгох нь нэн чухал. Компонентийг глобал болон локалаар бүртгүүлж сурсан тул Vue CLI хэрэгслээр үүсгэсэн төсөлдөө шилжин vue өргөтгөл бүхий компонентуудийн файлтай ажиллаж сурцгаая. Ингэснээр компонент бүр өөрийн тусдаа файлд байршин түүний төлвийг хөнгөн хянах боломжийг бүрдүүлснээр төслийн кодыг эвтэйхэнээр задлан жижиглэх юм.  
Vue CLI хэрэгслийн сүүлийн хувилбар төслийг үүсгэхдээ

  Нээгдсэн тоо: 823 Бүртгүүлэх

Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг

гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 360

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 450

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 431

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 502

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 573

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 566

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 705

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 838

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 832

 
Энэ долоо хоногт

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

Нээгдсэн тоо : 1578

 

функц [1;9] завсарын аль хэсэгт буурах вэ?

Нээгдсэн тоо : 688

 

функцийн хамгийн бага утгыг ол.

Нээгдсэн тоо : 767