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

ตะขอพื้นฐาน

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

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

ใช้ผล

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

อาร์กิวเมนต์ของฟังก์ชัน useEffect

1. ฟังก์ชันที่จะดำเนินการระหว่างวงจรชีวิตของคอมโพเนนต์
2. อาร์เรย์ของค่า useEffect เฝ้าดูการเปลี่ยนแปลงเพื่อทริกเกอร์การยิง การส่งอาร์เรย์เปล่าจะเลียนแบบคอมโพเนนต์componentDidMountและcomponentWillUnmountเมธอด ของ React ที่อิงตามคลาส

คำอธิบาย

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

ตัวอย่าง

ทำความเข้าใจเกี่ยวกับการใช้งานพื้นฐานและการล้างข้อมูลหลังการดำเนินการ

รหัสต่อไปนี้จะถูกดำเนินการหลังจากการเรนเดอร์ทุกครั้ง

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

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