Хэрэв та React дэгээний талаар хараахан сураагүй байгаа React хөгжүүлэгч бол яг одоо цаг нь болжээ. Энэ нийтлэл нь useEffect React Hook-ийг нарийвчлан үзэх болно. Энэ нь Швейцарийн армийн хутгатай тэнцэх дэгээ юм. Энэ нь бүрэлдэхүүн хэсэг холбогдсон үед өгөгдлийг хэрхэн авах, төлөв эсвэл тулгуур өөрчлөгдөх үед кодыг хэрхэн ажиллуулах, таймер эсвэл интервалыг хэрхэн тохируулах гэх мэт олон асуудлыг шийддэг.
UseEffect нь таны JSX (ямар ч төрлийн гаж нөлөө) буцадаггүй React бүрэлдэхүүн хэсэгт "хийхийг" хүссэн бараг бүх зүйлд ашиглагддаг. Та бүр бүрэлдэхүүн хэсэг бүрт хэд хэдэн useEffects-тэй байж болно.
Энэ бүх хүч нь үнэтэй байдаг: хэрэв та энэ нь хэрхэн ажилладагийг ойлгохгүй бол энэ нь эргэлзээ төрүүлж магадгүй юм. Энэ нийтлэлд бид олон янзын жишээг авч үзэх болно, ингэснээр та концепцийн загварыг ойлгож, үүнийг өөрийн код дээрээ ашиглах боломжтой болно.
Дэгээ -Юуг шийдэх гээд байгаа юм бэ?
Дэгээг анх React 16.8 хувилбарт нэвтрүүлсэн бөгөөд одоо React-ийн олон төслүүдэд ашиглагдаж байна. Hooks нь бүрэлдэхүүн хэсгүүдийн хооронд код давтагдах асуудлыг даван туулдаг. Тэдгээрийг анги ашиглахгүйгээр бичдэг. Энэ нь React нь ангиудыг орхиж байна гэсэн үг биш юм; дэгээ нь зүгээр л өөр арга юм.
React нь төлөв байдлын логик бүхий боловсронгуй бүрэлдэхүүн хэсгүүдийг хурдан үүсгэх боломжийг танд олгоно. Анги нь React Lifecycle Methods дээр тулгуурладаг тул эдгээр бүрэлдэхүүн хэсгүүдийг салгахад хэцүү байдаг. Эндээс React Hooks орж ирдэг.
Эдгээр нь бүрэлдэхүүн хэсгийг жижиг функцүүдэд хуваах боломжийг олгодог. Амьдралын мөчлөгийн аргад тулгуурлан кодыг жижиг хэсгүүдэд хуваахын оронд функциональ байдлаас хамааран кодыг жижиг хэсгүүдэд хувааж болно.
UseEffect Hook гэж юу вэ?
Дэгээ нь ES6 анги бичих шаардлагагүйгээр төлөвийн болон бусад хариу үйлдэл хийх чадварт хандах боломжийг олгодог функцууд юм. React hooks API нь useEffect нэртэй дэгээтэй. Хэрэв та урвалын амьдралын мөчлөгийг мэддэг бол useEffect дэгээ нь componentDidMount, componentDidUpdateБолон componentWillUnmount амьдралын мөчлөгийн аргуудыг хослуулсан.
React Hooks баримт бичгийн дагуу энэ нь ES6 ангиллын бүрэлдэхүүн хэсгийн амьдралын мөчлөгийн аргуудтай холбоотой зарим асуудлыг шийдвэрлэх зорилгоор бүтээгдсэн.
Syntax
Эхний аргумент нь өгөгдмөл байдлаар рэндэр болгоны дараа хийгдэх буцаан дуудлагын функц юм. Хоёрдахь параметр нь зөвхөн зорилтот төлөв өөрчлөгдсөн тохиолдолд буцааж дуудахыг Дэгээ-д зааварчилдаг нэмэлт Dependency массив юм.
Дэгээ нь тухайн хамаарал бүрийн түүхэн болон одоогийн байдлыг харьцуулдаг. Хэрэв хоёр утга таарахгүй бол Hook нь эхний параметрт заасан буцаан дуудлагыг дуудна. Хамааралтай массивууд нь ердийн буцаан дуудлагын горимыг өөрчилдөг бөгөөд Hook нь бүрэлдэхүүн хэсгийн хамрах хүрээний бусад бүх бүрэлдэхүүн хэсгүүдийг үл тоомсорлодог.
Үндсэн хэрэглээ
Мессежийг хадгалахын тулд би дээрх кодын жишээнд React useState-г ашиглаж байна. Үүний дараа би мессежийн төлөвийн хувьсагчийг аваад дэлгэцэн дээр хэвлэнэ. Гэсэн хэдий ч, би одоо бүрэлдэхүүн хэсгийг суулгаснаас хойш нэг секундын дараа мессежийг өөрчлөхийн тулд Effect-ийг ашиглахыг хүсч байна.
Би React framework-аас useEffect-г импортолсны дараа өөрийн эффектээ useState мөрийн ард оруулсан. Effect-ийг ашиглах эхний параметр бол функц юм. Энэ функц зохицуулагчийг ажиллуулах үед таны өгсөн аливаа гаж нөлөөг арилгах болно. Уг функц нь React бүрэлдэхүүн хэсгийн амьдралын мөчлөгийн аль нэг үйл явдал тохиолдоход дуудагддаг буцаан дуудлагын функц юм.
Үүнийг хэзээ хэрэглэх вэ?
UseEffect дэгээ нь янз бүрийн нөхцөл байдалд хэрэгтэй байж болно. Дараах нь хамгийн чухал зүйл юм.
- Бид өгсөн аргументаас хамааран өгөгдөл татахыг хүсвэл үйлчлүүлэгчийн талаас энэ параметрийг өөрчилж болно. Параметрийг шинэ мэдээллээр шинэчилсний дараа үүнийг эргэн санах болно.
- Хэрэв бид API-ийн төгсгөлийн цэгээс өгөгдлийг татаж аваад үйлчлүүлэгчийн тал дээр харуулахыг хүсвэл. Манай бүрэлдэхүүн хэсэг дүрслэгдэх үед useEffect дэгээнд өгөгдсөн функц эсвэл зохицуулагч ажиллаж, бүрэлдэхүүн хэсгийн төлөв дэх өгөгдлийг татаж авдаг. Дараа нь эдгээр статусыг хэрэглэгчийн интерфейсийн бүрэлдэхүүн хэсгүүдэд ашигладаг.
- Таны бүрэлдэхүүн хэсэг нь гадаад ертөнцийн өгөгдөлд тулгуурладаг бөгөөд бид өгөгдөл ирэх болно гэдэгт итгэлтэй байж чадахгүй бол бид Effect-ийг ашиглах хэрэгтэй (магадгүй сервер тэнд байгаа). Асуудал үүсгэж, бусад бүрэлдэхүүн хэсгүүдийг харуулахаас урьдчилан сэргийлэхийн оронд useEffect дэгээнд байрлуул.
Кейс ашиглах
Хэрэв бүрэлдэхүүн хэсэг нь эхний ажиллуулсны дараа дахин дүрслэгдсэн бол энэ нь ажиллахгүй.
Бүрэлдэхүүн хэсэг нь дүрслэх эсвэл дахин дүрслэх болгонд үүнийг үргэлж гүйцэтгэх ёстой.
Анхдагч байдлаар, програм нь зөвхөн нэг удаа ажилладаг. Дараа нь тулгуурын утгууд өөрчлөгдвөл дараахыг ажиллуулна уу:
Асинхрон үйлдлүүдийн хувьд useEffect-г үргэлж ашиглаарай.
useEffect кодын блокууд нь бусад хөгжүүлэгчдэд зориулсан асинхрон ажлын тодорхой тэмдэг юм. UseEffect-ийг ашиглахгүйгээр асинхрон код үүсгэх боломжтой боловч энэ нь "React арга" биш бөгөөд энэ нь нарийн төвөгтэй байдал болон алдааны эрсдлийг нэмэгдүүлдэг.
UI-г зогсоож болох асинхрон код бичихийн оронд useEffect-ийг ашиглах нь React нийгэмлэгт сайн мэддэг арга, ялангуяа React багийн сөрөг нөлөө үзүүлэхийн тулд үүнийг бүтээсэн арга юм.
Үүнийг ашигласны бас нэг давуу тал нь хөгжүүлэгчид кодыг зүгээр л хянаж үзээд "хяналтын урсгалаас гадуур" ажиллаж байгаа кодыг шууд илрүүлэх боломжтой бөгөөд энэ нь зөвхөн эхний рэндэр циклийн дараа л чухал болдог. Цаашилбал, блокууд нь дахин ашиглах боломжтой, бүр илүү семантик захиалгат дэгээ болгон задлахад тохиромжтой.
Жишээ нь
UseEffect кодыг ашиглан секунд тутамд тоог нэмэгдүүлнэ.
Дүгнэлт
Миний бодлоор useEffect Hook-ийн дизайны үндсэн зарчмууд болон шилдэг туршлагуудыг ойлгох нь хэрэв та дараагийн түвшний React хөгжүүлэгч болохыг хүсч байвал сурах чухал ур чадвар юм.
Дүгнэж хэлэхэд useEffect Hook нь императив, бүрэн логик нөлөө үзүүлэх боломжтой функцийг хүлээн авдаг. Гүйцэтгэлд нөлөөлөхийн тулд хоёр дахь параметр болох хамаарлын массивыг ашиглаж болно. Үүнтэй ажиллахдаа буцах функцийг ашиглан цэвэрлэх код бичих шаардлагатай.
Нийтлэл хэрэгтэй байсан бол сэтгэгдэл дээр бидэнд мэдэгдээрэй.
хариу үлдээх