Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

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

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

Нийтлэлээр графикийн хэвүүдийн /GUI pattern/ түүхийг авч үзье. Боловсруулалтын графикийн хэвүүдийг 30 гаруй жилийн туршид боловсруулж байгаа бөгөөд энэ хугацаанд гарч ирсэн бүх хэвүүдийн талаар авч үзэх нь боломжгүй зүйл. Иймээс сүүлийн 30 жилд бий болсон үндсэн хоёр чиг хандлагын талаар авч үзээд энэхүү хоёр хандлага эцэстээ Silverlight ийн MVVM ба WPF паттерн болон хувирсанг харцгаая. Хэрвээ та графикийн хэвүүдийн түүхийн талаарх мэдээллийг сонирхож байвал Мартин Фаулерын - GUI Architectures нийтлэлийг уншаарай.

Хааяа өөр өөр параметрүүдийн багцтай нэг аргыг үүсгэх шаардлага гардаг. Ирсэн параметрүүдээс хамааран аргын тодорхой хэрэгжүүлэлтийг хэрэглэнэ. Ийм боломжийг аргын хэт ачаалал (method overloading) нэрлэдэг. overloading нэрийн хэт ачаалал орчуулга сайнгүй болсон байх талтай. Иймээс нэрийг overloading гээд тогтоогоод явах нь илүү ч байж болно.  
C# хэлэнд класст өөр өөр сигнатуртай /тодорхойлогч/ нэг ижил нэртэй олон аргыг үүсгэх боломжтой. Сигнатур гэж юу вэ? Сигнатур дараах зүйлүүдээс бүрдэнэ.

• Аргын нэр
• Параметрүүдийн тоо
• Параметрүүдийн төрлүүд
• Параметрүүдийн дараалал
• Параметрүүдийн модификаторууд

Гэхдээ параметрүүдийн нэрүүд сигнатурт орохгүй.

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs дээр төрөл бүрийн өгөгдлүүдтэй хэрхэн үр дүнтэй харьцах аргуудыг судлаж эхлэнэ. Үүнийг бид маш энгийн

жишээгээр үзнэ.

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

import React, {useState} from 'react'

function App() {
  const [type, setType] = useState('users')
  
  return (
      <div className="container">
        <h1>Өгөгдлүүд: {type}</h1>
        
        <button onClick= {() => setType('users')} className="btn btn-primary mx-3">Хэрэглэгчид</button>
        <button onClick= {() => setType('todos')} className="btn btn-primary mx-3">Хийх ажлууд</button>
        <button onClick= {() => setType('posts')} className="btn btn-primary mx-3">Нийтлэлүүд</button>
        
      </div>
  );
}

export default App;

гэж үүсгэе.

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

C# -ийн класс, бүтцүүдэд ердийн аргуудаас гадна шинж гэж нэрлэдэг тусгай аргууд байдаг. Тэдгээр нь класс, структурийн талбарт хандах, утгуудыг авах, өөрчлөх боломжуудыг өгдөг.   

Шинжийн тодорхойлолт

Шинжийн стандарт тодорхойлолт

[модификатор] шинжийн_төрөл шинжийн_нэр
{
    get { шинжийн утгыг авахад хийгдэх үйлдлүүд}
    set { шинжийн утгыг тавихад хийгдэх үйлдлүүд}
}

байдаг. Шинжийн тодорхойлолтын эхэнд төрөл бүрийн модификаторууд тавигдаж болно. Тухайлбал хандалтын модификаторууд модификатор. Дараа нь шинжийн төрөл тэгээд шинжийн нэр байна. Шинжийн бүрэн тодорхойлолт get, set гэсэн хоёр блокийг агуулна.

Хичээлээр vue-resource сангийн интерсептор гэдэг сонирхолтой боломжийн тухай үзье. vue-resource сангийн github дээрх хаягаар хандан сан серверт илгээсэн хүсэлт, хариултад интерсепторийг хэрхэн дэмждэг талаар дэлгэрүүлэн үзэж болно.

Интерсепторийг идэвхижүүлбэл өөрөөр хэлбэл интерсептор функцуудыг нэмвэл серверт илгээгдэж буй хүсэлт, серверээс ирсэн хариу бүрийг барих боломж нээгдэнэ.

React аппликашний төлөвтэй ажиллахад зориулагдсан UseState хукийн ажиллагааг

import React from 'react'

function App() {
  return (
      <div className="container">
        <h1>Тоолуур</h1>
        <button className="btn btn-success mx-3">Нэмэх</button>
        <button className="btn btn-danger">Хасах</button>
      </div>
  );
}

export default App;

кодоор судлая. Туршилтын төслийг React хук хичээлд үүсгэсэнг сануулъя. Дээрх код бол харагдах байдлыг л тодорхойлж байгаа. Харин тоолууртай ажиллахын тулд төлвийг UseState хукийг ашиглан оруулан ирье.

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