React ตัวอย่างการสร้าง React Hook, React State Step-By-Step
React State
การเปลี่ยนแปลง state object ของ React จะทำให้ component ที่เกี่ยวข้องเรียกใช้เมธอด render ใหม่ เพื่อแสดงผลอัพเดตที่สถานะใหม่ของ component นั้นๆ โดย state object เป็นสถานะที่เก็บค่าของ property ภายใน component นั้นๆ นั่นเอง แปลงเป็นคำอื่นๆ คือ เมื่อ state object เปลี่ยนแปลง component จะทำการ render ใหม่ เพื่อแสดงผลที่สอดคล้องกับสถานะใหม่ของมัน
React Hook React state in functional component
สำหรับ functional component ใน React, เราสามารถใช้ React Hooks เพื่อเพิ่มตัวแปร state ได้ โดย Hooks เป็นฟังก์ชันที่ใช้เพิ่มตัวแปร state ลงใน functional component และจัดการกับ lifecycle methods ของ class component ต่างๆ ใน React โดย Hooks ถูกเพิ่มเข้ามาใน React ตั้งแต่เวอร์ชัน 16.8 ขึ้นไป useState เป็น React Hook ที่ใช้สำหรับเพิ่ม state เข้าไปใน functional component โดยมันจะส่งคืนอาร์เรย์ที่มีสองค่า: ค่า state ปัจจุบันและฟังก์ชันสำหรับอัปเดตค่า state นั่นเอง
ตัวอย่าง code case study => app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import React, { useState } from "react"; function FavoriteColor() { const [color, setColor] = useState("red"); return ( <> <h1>My favorite color is {color}!</h1> <button type="button" onClick={() => setColor("blue")}> Blue </button> <button type="button" onClick={() => setColor("red")}> Red </button> <button type="button" onClick={() => setColor("pink")}> Pink </button> <button type="button" onClick={() => setColor("green")}> Green </button> </> ); } function App() { return ( <div className="App"> <FavoriteColor /> </div> ); } export default App; |
กฎของ Hooks ที่สำคัญ 3 ข้อดังนี้
- Hooks สามารถเรียกใช้ได้เฉพาะภายใน React function components เท่านั้น
- Hooks สามารถเรียกใช้ได้เฉพาะในระดับบนสุดของ component เท่านั้น
- Hooks ไม่สามารถมีเงื่อนไขได้ คือไม่สามารถใช้ในส่วนของโค้ดที่มีเงื่อนไขได้ เช่นในส่วนของ if statements หรือ loops
ตัวอย่างการใช้ useState
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const incrementCount = () => { setCount(count + 1); // อัพเดตค่า count โดยเพิ่มขึ้นอีก 1 }; return ( <div> <button onClick={incrementCount}>Increment</button> <p>Count: {count}</p> {/* แสดงค่า count ปัจจุบัน */} </div> ); } export default Counter; |
สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651
ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก
