React: การจัดการ state

คอมโพเนนต์ React ทุกตัวสามารถมี state (สถานะ) ของตัวเองได้

state หมายถึงอะไร? state คือชุดข้อมูลที่จัดการโดย คอมโพเนนต์

ให้ลองนึกถึง form ดู ว่าแต่ละองค์ประกอบ input ของ form แต่ละตัวนั้นมีหน้าที่รับผิดชอบในการจัดการstate สิ่งที่ผู้ใช้งานเขียนอยู่ข้างในนั้น

และ button (ปุ่ม) มีหน้าที่รับผิดชอบในการรับทราบว่ามีการคลิกหรือเปล่าอะไรแบบนี้

ส่วนเองก็ลิงก์มีหน้าที่รับผิดชอบว่าและตรวจสอบว่าเมาส์วางอยู่บนลิงก์นั้นๆหรือเปล่า

ใน React หรือในเฟรมเวิร์ก/ไลบรารี ที่ใช้คอมโพเนนต์อื่นๆ แอปพลิเคชันทั้งหมดของเราจะอิงและใช้งาน state คอมโพเนนต์ โดยส่วนใหญ่

เราสามารถจัดการstate ทั่วไปได้โดยใช้ useState ที่ React มอบให้มาได้ แต่ในทางเทคนิคแล้วมันคือ hook (คุณไม่จำเป็นต้องรู้รายละเอียดของhookในตอนนี้เท่าไหร่หรอก คิดซะว่ามีมันอยู่ก็พอ)

คุณสามารถ import useState จาก React ด้วยวิธีนี้:

import { useState } from "react";

เมื่อเรียก useState() สิ่งที่คุณจะได้รับกลับมาก็คือ

• ตัวแปร state ใหม่
• และฟังก์ชันที่เราสามารถเรียกใช้เพื่อเปลี่ยนค่าของมันได้

useState() ต้องมีการใส่ค่าเริ่มต้นใส่ให้มันไว้ใน () จากนั้นมันจะส่งค่ากลับไปที่ออกไปสองตัวก็คือค่าที่เราใส่ไว้กับฟังก์ชันที่ใช้ในการเปลี่ยนแปลงค่าของมัน

นี่คือตัวอย่างวิธีใช้ useState():

const [count, setCount] = useState(0);

สิ่งนี้สำคัญ: เราไม่สามารถเปลี่ยนค่าของตัวแปรstateได้โดยตรง จากการทำ count++ หรือ count = count + 1

เราต้องเรียกใช้ฟังก์ชันที่ใช้ในการแก้ไขข้อมูลของมันนั่นก็คือ setCount() เท่านั้น

ไม่อย่างนั้น คอมโพเนนต์ React จะไม่อัปเดต UI การเรียกฟังก์ชันนั้นจะเป็นการบอก React ว่าstateของคอมโพเนนต์นี้มีการเปลี่ยนแปลงนะ

แต่ไวยากรณ์ค่อนข้างแปลกใช่ไหม? เนื่องจาก useState() ส่งคืนอาร์เรย์กลับมา ใช้อาร์เรย์ในการรับเพื่อเข้าถึงแต่ละรายการ เช่นนี้: const [count, setCount] = useState(0)

นี่เป็นตัวอย่างโดยรวม:

import { useState } from "react";

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

  return (
    <div>
      <p>คลิกไป {count} ครั้ง</p>
      <button onClick={() => setCount(count + 1)}>คลิกที่นี่</button>
    </div>
  );
};

คุณสามารถสร้างหรือใช้ useState() ได้มากเท่าที่คุณต้องการได้เลย เพื่อสร้างตัวแปรstateได้มากเท่าที่คุณต้องการ ซึ่งสามารถเก็บค่าใดๆก็ได้ ไม่จำเป็นจะต้องเป็นแค่ตัวเลข (รวมถึงอ็อบเจ็คและอาร์เรย์ด้วย):

const [count, setCount] = useState(0);
const [name, setName] = useState("John");
const [fruits, setFruits] = useState(["Apple", "Banana", "Orange"]);
const [persons, setPersons] = useState([
  { name: "Samai", score: 10 },
  { name: "Danai", score: 8 },
  { name: "Saman", score: 7 },
]);