การใช้งาน State ใน React

ลองใช้ฟังก์ชัน useState เพื่อ สร้าง state ที่เก็บชื่อผลิตภัณฑ์:

jsxconst state = useState('prod');

ผลลัพธ์คือ ค่าคงที่ state จะ เป็นอาเรย์ โดยที่องค์ประกอบแรก จะเก็บชื่อผลิตภัณฑ์ และในองค์ประกอบที่สอง - ฟังก์ชันสำหรับเปลี่ยนชื่อ:

jsxconst state   = useState('prod');
const name    = state[0];
const setName = state[1];

เพื่อความกระชับ โดยทั่วไปมักจะไม่ใช้ตัวแปรกลาง สำหรับอาเรย์ แต่จะใช้ การแยกโครงสร้าง (destructuring):

jsxconst [name, setName] = useState('prod');

ตอนนี้มาลองแสดง state ของเรา ที่มีชื่อ ผลิตภัณฑ์ในรูปแบบ markup กัน:

jsxreturn <p>
  <span>{name}</span>
</p>;

ลองรวบรวมทั้งหมดเข้าด้วยกันแล้วจะได้โค้ดดังนี้:

jsximport React, { useState } from 'react';

function App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
  </div>;
}

export default App;

ถ้าเราเรียกใช้โค้ดนี้ ตอนแรกใน div จะแสดงค่าเริ่มต้นของ state ในกรณีของเราคือ 'prod' เมื่อมีการเปลี่ยน state ผ่านฟังก์ชัน setName ค่าใหม่ของ state ก็จะ ปรากฏใน markup โดยอัตโนมัติ