บทนำ

Hook useEffectเป็นหนึ่งใน React hook ที่สำคัญที่คุณต้องรู้ ช่วยให้คุณสามารถแสดงผลข้างเคียงในส่วนประกอบที่ทำงานเมื่อมีการเปลี่ยนแปลงเกิดขึ้น ด้วยuseEffecthook คุณสามารถทำสิ่งต่างๆ มากมายใน React เช่น การดึงข้อมูล การทำงานกับ DOM และอื่นๆ อีกมากมาย

ในบทความนี้ เราจะมาเรียนรู้เกี่ยวกับ UseEffect hook ใน React พร้อมตัวอย่างการใช้งานจริง มาเข้าเรื่องกันเลย

วิธีใช้ UseEffect?

เบ็ดuseEffectยอมรับสองพารามิเตอร์ อันแรกเป็นข้อบังคับ ซึ่งเป็นฟังก์ชันเรียกกลับ ในทางกลับกัน พารามิเตอร์ที่สอง (อาร์เรย์ของค่าหรืออาร์เรย์ว่าง) เป็นทางเลือก และเราใช้มันเมื่อเราต้องการให้ hook ทำงานหลังจากช่วงเวลาที่แสดงค่าเฉพาะในแอปพลิเคชันของเรา

ในการเริ่มต้นใช้งาน hook useEffectคุณจะต้องนำเข้าจากแพ็คเกจ React ก่อน

นี่คือตัวอย่าง:

import React, { useEffect } from 'react';

เมื่อมีสิ่งใดในแอปพลิเคชันของคุณอัปเดตและคุณต้องการทำอะไร คุณควรใช้useEffect. ตัวอย่างต่อไปนี้เข้าถึง DOM เพื่อเปลี่ยนพื้นหลังของเนื้อหาด้วยuseEffect:

useEffect(()=>{
  document.body.style.background = "black";
});

นี่คือตัวอย่าง:

useEffect(()=>{
  document.body.style.background = "blue";
},[]);

นอกจากนี้เรายังสามารถแสดงผลข้างเคียงเมื่อค่าเฉพาะในส่วนประกอบของเราเปลี่ยนแปลง

นี่คือตัวอย่าง:

useEffect(()=>{
  console.log('Only run on name change')
},[name]);

ฟังก์ชั่นทำความสะอาด

เมื่อแอปพลิเคชันของคุณต้องการกำหนดผลข้างเคียงจำนวนมาก คุณจะต้องใช้ฟังก์ชันการล้างข้อมูลซึ่งจะล้างผลข้างเคียงแต่ละอย่างเมื่อเกิดขึ้น มิฉะนั้น คุณจะส่งผลต่อประสิทธิภาพของแอปพลิเคชันของคุณ

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

นี่คือตัวอย่าง:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const App = () =>{
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
useEffect(()=>{
    window.addEventListener("resize", ()=>{
      setScreenWidth(window.innerWidth);
    });
    // Return the cleanup function which cleans the effect(event).
    return ()=>{
      window.removeEventListener("resize", ()=>{
        setScreenWidth(window.innerWidth);
      });
    }
  });
return <>
  <div>{screenWidth}</div>
  </>
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,
  rootElement
);

ฟังก์ชันล้างข้อมูลถูกส่งกลับภายในฟังก์ชันเรียกกลับ และช่วยให้เราสามารถลบเหตุการณ์ที่เกิดขึ้นได้

กำลังดึงข้อมูลด้วย UseEffect

ผลข้างเคียงอีกประการของ hook useEffectคือการดึงข้อมูลจาก API คุณสามารถดึงข้อมูลของคุณเหมือนกับที่คุณทำกับ Vanilla JavaScript คุณเพียงแค่ต้องทำมันภายในฟังก์ชันเรียกกลับของ hook useEffectหากคุณใช้ งาน .then()และcatch()จัดการกับคำสัญญาที่ส่งคืน

นี่คือตัวอย่างการดึงข้อมูลผู้ใช้จาก GitHub API:

const App = ()=>{
 // The API URL.
 const APIurl = 'https://api.github.com/users';
 
// useState.
 const [users, setUsers] = useState([]);
 
// useEffect.
 useEffect(()=>{
  fetch(APIurl)
   .then(res => res.json())
   .then(data => setUsers(data));
},[]);
return(
<>
 <ul>
 {users.map(user => (
  <li key={user.id}>{user.login}</li>
 ))}
 </ul>
</>
)
}

นี่คือตัวอย่าง:

const App = ()=>{
// The API URL.
  const APIurl = 'https://api.github.com/users';
// useState.
  const [users, setUsers] = useState([]);
// useEffect.
  useEffect(()=>{
    getUser();}
    ,[]);
// Separate function.
  async function getUser() {
    const response = await fetch(APIurl);
    const data = await response.json();
    setUsers(data);
  }return(
    <>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.login}</li>
      ))}
    </ul>
    </>
  );
}

บทสรุป

useEffectเป็นเบ็ดที่สำคัญที่สุดที่คุณต้องเข้าใจเมื่อจัดการกับ React ช่วยให้คุณเพิ่มคุณสมบัติและแสดงผลข้างเคียงในส่วนประกอบการทำงานได้อย่างง่ายดาย

ขอบคุณที่อ่านบทความนี้ ฉันหวังว่าคุณจะพบว่ามีประโยชน์

อ่านเพิ่มเติม

หากคุณสนใจเนื้อหาที่เป็นประโยชน์มากขึ้นเกี่ยวกับ JavaScript และการพัฒนาเว็บ คุณสามารถสมัครรับจดหมายข่าวของฉัน