Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
  
  const changeHandler = event => {
    setName(event.target.value)  
  }
  
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

жишээгээр харцгаая.

input элемент useState -тэй харилцан ажиллах болно. Өөрөөр хэлбэл input -д өөрчлөлт ороход changeHandler функц ажиллан name төлвийн утгыг input -д оруулсан утгаар өөрчлөөд байна гэсэн үг. useState -ээр input элементтэй зөв харилцан ажилахын тулд input элементийн value атрибутад name хувьсагчийг олгох хэрэгтэй. Програмийн компиляцийг хийвэл хөтөч дээр input элемент бүхий хуудасыг нээх бөгөөд input -д утга оруулбал

түүнийг h1 гарчигаар үзүүлнэ. Хуудасны ажиллагаанаас input -ийн өөрчлөлтийг ямар нэгэн асуудалгүй хэвийн боловсруулж байгаа нь харагдана. Асуудал хуудас хэд хэдэн input элементийг агуулах үед бий болно. Жишээ нь манай хуудаст нэрээс гадна овог гэх мэтээр шинэ input -ууд нэмэгдвэл кодод

function App() {
  const [name, setName] = useState('')
  const [lastName, setLastName] = useState('')
  
  const changeHandler = event => {
    setName(event.target.value)  
  }
  
  const LastNameHandler = event => {
    setLastName(event.target.value)
  }
  
  return (
    <div className="container pt-3">
      <input type="text" value={lastName} onChange={LastNameHandler} className="mx-3"/>
      <input type="text" value={name} onChange={changeHandler}/>
      <hr />
      <h1>{lastName} {name}</h1>
    </div>      
  );
}

шинээр input , төлөвүүд, үйл явцын боловсруулагч гээд нэг ижил төрлийн кодууд нэмэгдэх болно. Үүнд зарим нэгэн оптимизацийг /сайжруулалт/ хийж болох нь ойлгомжтой ч бид өөрсдийн хукийг үүсгэн асуудлыг хэрхэн шийдэхийг

import React, {useEffect, useState} from 'react'

function useLogger(value) {
  useEffect( () => {
    console.log('Value changed: ', value)
  }, [value])
}

function App() {
  const [name, setName] = useState('')
  
  const changeHandler = event => {
    setName(event.target.value)  
  }
  
  useLogger(name)
  
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <hr />
      <h1>{name}</h1>
    </div>      
  );
}

харцгаая. Кодод нэг input элементийг үлдээгээд useLogger функцийг үүсгэн өгье. useLogger функц бол манай хук учраас нэрийг use угтвартай өгсөн. useLogger функц тодорхой хувьсагчийн өөрчлөлтийг ажиглах үүрэгтэй учраас параметрээр хувьсагчийг авах ёстой. Өөрийн хукийг зохиохдоо react -ийн үндсэн хукуудыг ашигладаг онцлогтой. Манай useLogger функц ямар нэгэн хувьсагчийн өөрчлөлтийг ажиглаж байхын тулд useEffect хукийг ашигласан. Функцийн useEffect хук консолд value -ийг өөрчлөлтийг үзүүлнэ. useLogger функц бол зохиомол хукийн суурь код юм. useLogger хукийг App компонентод useLogger(name) гэж ашиглая. Хуудасны ажиллагааг шалгавал

name хувьсагчийн өөрчлөлт бүрд консолд түүний утгыг үзүүлнэ. Одоо input -ийн асуудлыг хэрхэн шийдэхийг

...

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue)
  
  const onChange = event => {
    setValue(event.target.value)  
  }
  
  return {
    value, onChange 
  }
}

function App() {
  const input = useInput('')
  
  useLogger(input.value)
  
  return (
    <div className="container pt-3">
      <input type="text" value={input.value} onChange={input.onChange}/>
      <hr />
      <h1>{input.value}</h1>
    </div>      
  );
}
...

кодоос харцгаая. Энд useInput шинэ хук буюу функцийг нэмсэн. Функцийг input -д ашиглах тул элементийн ахндагч утгыг initialValue параметрээр дамжуулъя. Цааш useInput функцэд useState хукаар локал /дотоод/ төлвийг үүсгэхдээ initialValue параметрээр ирсэн утгыг төлвийн анхдагч утгаар өгнө. Функцээс input -д ашиглагдах атрибут, функцууд гээд олон зүйлийг буцааж болох ч App компонентийн input -д хэрэглэгдэх зүйлээр хязгаарлан өгсөн. Өөрөөр хэлбэл App компонентийн input -д ашиглагдаж буй атрибут, функцийг useInput функцээс буцаасан. React -д input бол html тег биш элемент бөгөөд энэ элемент value, onChange параметрүүдийг авна гэдгээс useInput функц value, onChange талбаруудтай обьектийг буцааж байгаа хэрэг. ES6 -д обьектийн талбар, түүний утгыг агуулж буй хувьсагчид ижил бол обьектийг ганц нэрээр тодорхойлж болдогийг ES6 -гийн өөрчлөлтүүд хичээлийн багцаас мэднэ.

Жиш: React санг судлахын өмнө Javascript хэлийг сайн судлан ойлгосон байх хэрэгтэй шүү.  

useInput функц App компонентийн input -ийн логикийг өөртөө агуулсан тул App компонентоос input -ийн төлөвтэй холбоотой / useState, changeHandler / хэсгийг хассан байгаа. Дээрх кодод input -д хэрэглэх суурь хукийн кодийг л харуулж байгаа. App компонентод useInput хукийг useInput('') гэж анхдагч утгыг дамжуулан дуудаад буцаах обьектийг input хувьсагчид авна. Цааш useLogger, input, h1 -үүдэд input обьектийн тохирох талбаруудыг ашиглах ёстой.
Хуудасны ажиллагааг шалгавал бүх зүйл хэвийн ажиллана. Туршаад үзээрэй.
useInput функцээс буцаах обьектийн талбарууд App компонентийн input -ийн атрибутуудын нэртэй ижилхэн буюу давхцаж байгаа тул

...
function App() {
  const input = useInput('')
  
  useLogger(input.value)
  
  return (
    <div className="container pt-3">
      <input type="text" {... input}/>
      <hr />
      <h1>{input.value}</h1>
    </div>      
  );
}
...

javascript -ийн spread операторийг ашиглан {... input} бичлэгээр сольж болно. Одоо App компонент олон input -тэй жишээ нь овог, нэр гэх мэтээр болох тохиолдолд

...
function App() {
  const lastName = useInput('')
  const name = useInput('')
  
  return (
    <div className="container pt-3">
      <input type="text" {... lastName}/>
      <input type="text" {... name}/>
      <hr />
      <h1>{lastName.value} {name.value}</h1>
    </div>      
  );
}
...

гэж ямар нэгэн илүү зүйлгүйгээр шийдэх боломжтой.
useInput функцээс обьект буцааж байгаа тул логикийг илүү өргөжүүлж болно. Жишээ нь useInput хукд input -ийг

...
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue)
  
  const onChange = event => {
    setValue(event.target.value)  
  }
  
  const clear = () => {
    setValue('')
  }
  
  return {
    bind: {value, onChange},
    value,
    clear
  }
}
...

цэвэрлэх clear функцийг нэмэн өгөөд буцаах обьектоор дамжуулъя. Функцээс буцааж буй обьектод input -тэй холбоотой атрибут, функцийг тусд нь bind обьектод оруулсан. Энэ нь App компонентийн input элементэд ямар нэгэн илүү шинжүүд дамжуулахгүй санаа. Хэрвээ input элементэд түүнд хамаагүй жишээ нь clear шинжийг дамжуулбал react компонентийн jsx кодийн генераци хийхдээ алдаа заах болно. useInput хукаас буцаах обьектийг App компонентод

function App() {
  const name = useInput('')
  
  return (
    <div className="container pt-3">
      <input type="text" {... name.bind}/>
      <button className="btn btn-warning" onClick = {() => name.clear()}>Цэвэрлэх</button>
      <hr />
      <h1> {name.value}</h1>
    </div>      
  );
}

гэж ашиглая. input элементийн шинжээр name.bind обьектийг өгөөд clear функцийг Цэвэрлэх товч дээр даралт хийхэд дуудагдахаар оруулан өгсөн байгаа. Програмийн ажиллагааг шалган үзвэл

ажиллагаанууд өмнөхтэй ижил ч Цэвэрлэх товчийг дарвал input -ийг цэвэрлэнэ.
Ийм байдлаар бид маш олон функционалтай өөрсдийн хукийг үүсгэн ашиглах боломжтой.

Зөвлөмж: Сайтын нийтийн болон бүртгэлтэй төлөвтэй хичээлүүдээс тухайн сэдвийн талаар л тодорхой ойлготыг авч болох боломжтой. Хичээлийн жишээ нь өмнөх хичээлүүдийн жишээн дээр суурилсан тул та санг боломжийн хэмжээнд эзэмшсэн байж хичээлийн кодийг ойлгох болно. Санг бүрэн хэмжээнд судлахыг хүсвэл та тусгай эрх тусгай эрх нээлгэхийг зөвлөе.