React Hooks ช่วยให้คุณใช้สถานะและคุณสมบัติ React อื่น ๆ โดยไม่ต้องสร้างส่วนประกอบคลาส React เมื่อใช้ hooks คุณสามารถสร้างแอปพลิเคชัน React ที่ใช้งานได้เต็มรูปแบบโดยเฉพาะกับ Function Components ไม่class Example extends React.component {}จำเป็น อีกต่อไป

ตะขอพื้นฐาน

ขอเกี่ยวในชีวิตประจำวันสำหรับกรณีการใช้งานในชีวิตประจำวัน

React Basic Hooks
- useEffect
- useState => บทความนี้
- useContext => เร็วๆ นี้

ใช้สถานะ

เอกสารอย่างเป็นทางการสำหรับ useState

const [state, setState] = useState(initialState);

1. สถานะเริ่มต้น

อาร์เรย์ที่มีสองค่า

1. สถานะล่าสุด
2. ฟังก์ชันเพื่ออัปเดตสถานะเป็นค่าใหม่

useStateยอมรับค่าเริ่มต้นและส่งกลับสองค่า: สถานะล่าสุดและฟังก์ชันเพื่ออัปเดตสถานะ ค่าจะถูกส่งกลับในรูป แบบของอาร์เรย์และโดยทั่วไปจะอ่านโดยใช้ไวยากรณ์การทำลายโครงสร้างอาร์เรย์

setStateเป็นฟังก์ชันแบบอะซิงโครนัส ดังนั้นสิ่งสำคัญคือต้องระลึกไว้เสมอว่าอาจต้องใช้เวลาในการดำเนินการให้เสร็จสิ้น บางครั้งสถานะใหม่จำเป็นต้องคำนวณสถานะก่อนหน้า การคำนวณสถานะใหม่จากสถานะเก่าสามารถทำได้โดยการส่งฟังก์ชันไปยังเมธอดsetStateที่ให้ไว้ในอาร์กิวเมนต์ที่สอง ( [1]ในอาร์เรย์ javascript) ของอาร์เรย์ที่ส่งคืน สิ่งสำคัญคือต้องแน่ใจว่าuseStateและuseEffectฟังก์ชันถูกดำเนินการตามลำดับเดียวกันทุกครั้ง หากuseStateและuseEffectฟังก์ชันไม่ทำงานตามลำดับเดียวกัน คุณจะพบกับช่วงเวลาที่เลวร้ายมาก (เพิ่มเติมเกี่ยวกับการจัดลำดับที่ถูกต้องด้านล่าง) ในการคำนวณที่แม่นยำจะถูกส่งกลับเมื่อไม่มีการรักษาลำดับของฟังก์ชัน

ตัวอย่าง

ทำความเข้าใจuseStateกับค่าส่งคืน

รหัสต่อไปนี้สามารถแสดงได้หลายวิธี

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

เปลี่ยนหมีเป็นกระทิง

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

รหัสต่อไปนี้จะเพิ่ม 27 ให้กับสถานะก่อนหน้า

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

ทำความเข้าใจเกี่ยวกับการกำหนดค่าเริ่มต้นของตัวแปรสถานะแบบขี้เกียจ ตอบโต้คำอธิบายอย่างเป็นทางการของ Docs

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

เว็บไซต์ส่วนตัว
LinkedIn
Instagram