ฮุคเอฟเฟกต์ useEffect ใน React

สำหรับการทำงานกับเอฟเฟกต์ ใช้ ฮุค useEffect มาดูการทำงานของมันกัน

เริ่มต้นด้วยการนำเข้าฮุคของเรา:

App.jsximport { useEffect } from 'react';

มาสร้างคอมโพเนนต์ App ที่มี หัวเรื่อง:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

สมมติว่าเราต้องการทำบางอย่าง หลังจากการเรนเดอร์ เช่น ตั้งค่าสีพื้นหลังของทั้งหน้า ใน กรณีนี้ระบบภายนอกจะเป็น DOM ของเบราว์เซอร์

มาใช้ฮุคของเรา:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

ในพารามิเตอร์ที่สอง จะส่งอาร์เรย์ของ dependencies ซึ่งรวมถึงค่าที่ใช้โดยฟังก์ชัน ของคอมโพเนนต์ ตอนนี้เราปล่อยให้มันว่างไว้ ในกรณีนี้สีจะถูกตั้งค่าเป็น สีเขียวเพียงครั้งเดียวหลังจากการเรนเดอร์ ไม่สามารถละเว้นพารามิเตอร์ที่สองได้ เนื่องจากคอมโพเนนต์ของคุณอาจ เข้าสู่ลูปไม่สิ้นสุด