Renderlovchi props

JSX ifodalari haqida allaqachon gaplashganimiz uchun, kodni qayta ishlatishni osonlashtirish uchun komponent darajasidagi holatni argument sifatida qabul qiladigan funksiyalarni props sifatida berish keng tarqalgan pattern’dir.

Keling, oddiy misolni ko’rib chiqamiz:

<WindowSize
    render={({ width, height }) => (
        <div>
            Sizning oynangiz {width}x{height}px
        </div>
    )}
/>

Bu yerda render deb nomlangan prop borligini ko’rishimiz mumkin, bu qiymat sifatida funksiyani qabul qiladi. Bu prop hatto ba’zi JSX belgilarini chiqaradi, aslida bu render qilinadi. Lekin nega? WindowSize ichki tarzda foydalanuvchining oynasi o’lchamini hisoblash uchun qandaydir “sehr” bajaradi va keyin props.renderni chaqiradi, e’lon qilgan tuzilmani qaytarish uchun ichki state’dan foydalanib, oyna o’lchamini ko’rsatadi.

WindowSize komponenti misoli

Keling, yaxshiroq tushunish uchun WindowSizeni ko’rib chiqaylik:

const WindowSize = (props) => {
    const [size, setSize] = useState({ width: -1, height: -1 });
 
    useEffect(() => {
        const handleResize = () => {
            setSize({ width: window.innerWidth, height: window.innerHeight });
        };
 
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);
 
    return props.render(size);
};

Ushbu misoldan ko’rish mumkinki, WindowSize har safar o’lcham o’zgarganda ma’lumotlarni saqlash uchun event listener’dan foydalanadi, lekin komponentning o’zi interfeysga ega emas, shuning uchun “headless” deb nomlanadi, ya’ni qanday UI ko’rsatishi kerakligi haqida bilmaydi. Bu boshqaruvni uni render qilayotgan ota komponentga topshiradi va o’ziga berilgan render prop’ni chaqiradi, ya’ni render qilish ishini ota komponentga topshiradi.

Bu pattern, oyna o’lchamiga bog’liq komponentga useEffect bloklarini takrorlamasdan ushbu ma’lumotni olishga yordam beradi va kodimizni biroz ko’proq DRY (Takrorlanmas Kod, “Don’t repeat yourself”) saqlaydi. Biroq, bu pattern hozirgi kunda unchalik ommalashmagan va React hook’lari bilan samarali tarzda almashtirilgan.

Funksiya sifatida children

Chunki children ham prop hisoblanadi, ba’zi dasturchilar render prop nomini butunlay olib tashlashni afzal ko’rishadi va o’rniga faqat childrendan foydalanishadi. Bu WindowSizedan foydalanishni quyidagicha o’zgartiradi:

<WindowSize>
    {({ width, height }) => (
        <div>
            Sizning oynangiz {width}x{height}px
        </div>
    )}
</WindowSize>

Ba’zi React mualliflari bu yondashuvni afzal ko’rishadi, chunki bu kodning maqsadiga yaqinroq: bu holda WindowSize biroz “React context”ga o’xshab ketadi va nima ko’rsatayotganimiz “context”ni iste’mol qilayotgan “children” kabi ko’rinadi. Shunga qaramay, React hook’lari ushbu pattern’ga bo’lgan ehtiyojni umuman yo’q qiladi, shuning uchun ehtiyotkorlik bilan yondashish kerak.