React-ийн useState hook-ийг эхнээс нь бүрэн ойлгох

Хамгийн түгээмэл ашиглагддаг hook болох useState яг хэрхэн ажилладаг вэ? State шинэчлэгдэх бүрд компонент яагаад дахин зурагддагийг жишээгээр тайлбарлав.

React сурч эхэлж буй хүн бүр эхэндээ нэг л зүйлд эргэлздэг: “Би энэ хувьсагчийг өөрчиллөө, гэтэл дэлгэц дээр яагаад шинэчлэгдэхгүй байна аа?”. Хариулт нь энгийн — React таны хувьсагчийг ажигладаггүй, харин state-ийг л ажигладаг.

useState бол компонент дотор “санах ой” үүсгэдэг hook юм. Тэр нь одоогийн утга, түүнийг шинэчлэх функц гэсэн хоёр зүйлийг буцаадаг. Шинэчлэх функцийг дуудах бүрд React уг компонентыг дахин зурж, шинэ утгыг дэлгэц дээр тусгадаг.

Хамгийн энгийн жишээ

Дараах товч дарагдах бүрд тоолуур нэгээр нэмэгдэнэ. Энд count нь одоогийн утга, setCount нь түүнийг шинэчлэх функц.

App.jsx

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      {count} удаа дарсан
    </button>
  )
}

Яагаад шууд өөрчилж болохгүй вэ?

Олон хүн эхэндээ count = count + 1 гэж бичихийг оролддог. Гэвч ингэвэл React ямар нэг өөрчлөлт болсныг мэдэхгүй, тиймээс дэлгэц шинэчлэгдэхгүй. Зөвхөн setCount дамжуулж өгснөөр React дахин зурах шаардлагатайг ойлгодог.

State-ийг шууд бүү өөрчил. Үргэлж set функцээр дамжуул — энэ бол React-ийн хамгийн чухал дүрэм.

Санаж авах гурван зүйл

useState нь [утга, шинэчлэх функц] гэсэн массив буцаадаг.
set функц дуудагдах бүрд компонент дахин зурагдана.
Хуучин утганд тулгуурлах бол setCount(c => c + 1) хэлбэрийг ашигла.

Эдгээрийг ойлгосон бол та React-ийн state удирдлагын хамгийн үндсэн зарчмыг эзэмшсэн гэсэн үг. Дараагийн алхам нь useEffect — тэр талаар удахгүй бичих болно.