'커리' 기능으로 리액트 생산성 향상

아살롬 알라이쿰!

React da ko'pincha ushbu holatdagi 이벤트 핸들러 larni ishlatilishini guvohi bo'lamiz ya'ni odatda implicit bo'lgan dastlabki 이벤트 argumentimizga qo'shimcha tarzda 2 - argumentni ham funksiyamizga yuborishga to'g'ri keladi:

const handleChange = (e: Event, type: string) => {
  // input event va type bilan bog'liq kodimiz
}

return (
  <>
    <!-- ... -->
    <input onChange={(e) => handleChange(e, 'line')} />
    <!-- ... -->
    <input onChange={(e) => handleChange(e, 'point')} />
    <!-- ... -->
    <input onChange={(e) => handleChange(e, 'polygon')} />
    <!-- ... -->
  </>
)

Ushbu kod albatta xatosiz ishlaydi lekin bu yerda muammo onChange 이벤트 처리기 funksiyamizni yoyishga to'g'ri keladi ya'ni:

onChange={handleChange} => onChange={(e) => handleChange(e)}

Bundan tashqari kodimiz unchalik ham clean 에마. Balki bu usulni bitta joyda ishlatsak uncha bilinmas lekin bu kodimiz bir nechta joyida qayta-qayta ishlatilsa ayniqsa refactor qilishda muammo yaqqol ko'rinadi.

소다 예침: curried funksiya bilan kodimizni quyidagi 우아하고 깨끗한 ko'rinishga olib kelishimiz mumkin:

const handleChange = (type: string) => (e: Event) => {
  // input event va type bilan bog'liq kodimiz
}

return (
  <>
    <!-- ... -->
    <input onChange={handleChange('point')} />
    <!-- ... -->
    <input onChange={handleChange('line')} />
    <!-- ... -->
    <input onChange={handleChange('polygon')} />
    <!-- ... -->
  </>
)

Ya'ni funksiya qaytaradigan funksiyani 이벤트 핸들러 sifatida ishlatamiz.

Curried funksiyalar haqida ushbu linkdan batafsil ma'lumot olishingiz mumkin: https://javascript.info/currying-partials