Hooklarni tushunish | Hooks qo'llanma 6

React Conf 2018 da tanishtirilgan React hooklarining asoslarini o'rganish

React Conf 2018 da, Sophie Alpert va Dan Abramov tomonidan Hooklar tanishtirildi, bu yangi hususiyatlar orqali code ingizni 90% tozaroq yozish imkoni paydo bo'ldi. Siz shunchaki hook ni react kutubxonasidan import qilib olasiz, va componentingizning state ini boshqara olishingiz yoki bir necha qator kod bilan boshqa "xunarlar" ko'rsatishingiz mumkin.

Konfirensiya

React Hooklari tanishtirilgan React Conf 2018 ning videosini ko'rishni sizga qattiq tavsiya qilaman. Videoni bu yerdan ko'rishingiz mumkin. https://www.youtube.com/watch?v=dpw9EHDh2bM

Hooklar

Videoda tanishtirilgan 2ta asosiy hook: useState va useEffect. Ikkisining ham bu qo'llanmada alohida bo'limi mavjud.

useState, nomidan ma'lumki bu hook bizga componentimizning state ini nazorat qilish imkonini beradi. Misol uchun, siz foydalanuvchining yoshini nazorat qiluvchi state yaratishingiz mumkin. useState haqida to'liqroq ma'lumotni keyingi maqolada o'qishingiz mumkin.

const [age, setAge] = useState(30)

useEffect componentning hayot sikli(lificycle)ni nazorat qiluvchi hook. U Class komponentning ComponentDidMount, ComponentDidUpdate va ComponentWillUnmount metodlarini bir necha qator kod bolan o'rnini bosadi. Bu hook haqida useEffect bo'limida qayta gaplashamiz.

useEffect(() => {
		document.title = `You clicked ${count} times`;
}, [count]);

Qachonki count o'zgarganida useEffect ichidagi kod qayta ishga tushadi.

Bundan tashqari Reactning useContext, useReducer va useRef singari hooklari ko'p. Siz hattoki o'zingizning hookingizni yaratishingiz mumkin. Reactning boshqa hooklari bilan tanishmoqchi bo'lsangiz qo'llanmaning davomini o'qing yoki rasmiy sahifadan ma'lumot olsangiz bo'ladi.

Qoidalar

React hooklari qulay va kodni tozaroq qiladi. Ammo, React proyektlaringizda ularni ishlatishni hohlasangiz, ba'zi qoidalar bilan tanishib chiqishingiz kerak bo'ladi. Yo'qsa dasturingizda muammo paydo bo'lishi va siz uni debug qilishga vaqt sarflashingiz mumkin. Albatta kasallikni davolagandan uni oldini olgan yaxshi va debuggingga vaqt sarflash o'rniga qoidlarni ko'rib chiqqan maqbul.

Birinchi qoida: Hooklarni faqat yuqorida chaqiring.

React hooklarini looplar,shartli operatorlar va nested funksiyalar ichida chaqirib bo'lmaydi. Ular Sizning har bir componentingizni yuqori qismida bo'lishi shart. Misol uchun, keling useState yordamida name yaratib olamiz.

const [name,setName] = useState("")

Agar ism bo'sh string ga teng bo'lmaydigan bo'lsa useEffect bilan biror amal bajaramiz.

//Qo'pol xato

if (name != "") {
    useEffect(() => {
        // Biror amal
    }, [])
}

Hooklarning qoidalarini buzayotganiz haqida error paydo bo'ladi va siz hookni noto'g'ri chaqiryapsiz. Bu muammoni hal qilish uchun if shartli operatorini useEffectning ichiga olishimiz kerak.

useEffect(() => {
    if (name != "") {
        // Biror amal
    }
}, [])

Ikkinchi qoida: Hooklarni faqat function componentlari bilan ishlating

Hooklarni class componentlar ichida ishlatib bo'lmaydi. Misol uchun, siz useEffectni quyidagi kabi ishlata olmaysiz.

//Qo'pol xato

class MyComponent extends React.Component {
    render() {
        useEffect(() => {
            // Biror amal
        }, [])
    }
}

Bu muammoni hal qilish uchun siz class componentni function componentga aylantirishingiz yoki class componentning hayot sikl(lifecycle) metodlaridan foydalanishingiz kerak. Man function componentga aylantirishni maslahat bergan bo'lardim.

//function component

function MyComponent() {
    const [name, setName] = useState("Mary")
    
    useEffect(() => {
       // Biror amal
    }, [])

    // boshqa kodlar...
}

// arrow function component

const MyComponent = () => {
    const [name, setName] = useState("Mary")
    
    useEffect(() => {
       // Biror amal
    }, [])

    //boshqa kodlar...
}