ตอบสนองการใช้งานผลในเชิงลึก / การใช้ประโยชน์ผลกระทบ?

ฉันพยายามที่จะเข้าใจuseEffectเบ็ดในเชิงลึก

ฉันต้องการทราบว่าจะใช้วิธีใดเมื่อใดและเพราะเหตุใด

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

useEffect(callback)

ทำงานกับทุกองค์ประกอบการแสดงผล

โดยทั่วไปใช้สำหรับการดีบั๊กคล้ายกับการทำงานของร่างกายในทุกเรนเดอร์:

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

รันหนึ่งครั้งบนอุปกรณ์ประกอบ

มักจะใช้สำหรับการเริ่มต้นสถานะส่วนประกอบโดยการดึงข้อมูล ฯลฯ

หมายเหตุ : การเรียกกลับดำเนินการหลังจากทำให้เฟส (ที่ทราบ "Gotcha")

useEffect(callback,[arg])

ทำงานเกี่ยวกับการเปลี่ยนแปลงของargค่า

"On Change"หมายถึงการเปรียบเทียบแบบตื้นกับค่าก่อนหน้าของarg(เปรียบเทียบค่าargจากการเรนเดอร์ก่อนหน้ากับค่าปัจจุบันprevArg === arg ? Do nothing : callback())

มักจะใช้เพื่อเรียกใช้เหตุการณ์ในการเปลี่ยนอุปกรณ์ประกอบฉาก / สถานะ

หมายเหตุ: สามารถให้การอ้างอิงหลายรายการ: [arg1,arg2,arg3...]

• คำแนะนำฉบับสมบูรณ์useEffectโดย Dan Abramov
• useEffectAPI
• การใช้เอฟเฟกต์ตะขอ - ทำปฏิกิริยาเอกสาร

หากคุณคุ้นเคยกับวิธีวงจรชีวิตของคลาส React คุณสามารถนึกถึง useEffect Hook เป็น componentDidMount, componentDidUpdate และ componentWillUnmount รวมกัน

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

2.useEffect ด้วย paraments ที่สองเป็น []: สิ่งนี้จะถูกใช้เมื่อเราต้องการบางสิ่งบางอย่างที่เกิดขึ้นในเวลาของการติดตั้งของชิ้นส่วนถ้าเพียงดำเนินการครั้งเดียวในช่วงเวลาของการติดตั้งมันใกล้ชิดกับส่วนประกอบที่คุ้นเคย

3.useEffect โดยมีการส่งผ่านข้อโต้แย้งบางอย่างในพารามิเตอร์ที่สอง: สิ่งนี้จะใช้เมื่อเราต้องการให้บางสิ่งบางอย่างเกิดขึ้นในเวลาที่ pramter ผ่านเช่น args มีการเปลี่ยนแปลงในกรณีของคุณ

สำหรับข้อมูลเพิ่มเติม ตรวจสอบที่นี่: https://reactjs.org/docs/hooks-effect.html

3.useEffect ที่มีอาร์กิวเมนต์บางตัวผ่านไปในพารามิเตอร์ตัวที่สอง useEffect (() => {}, [arg])

มันจะทำงานก่อนแล้วมันจะทำงานอีกครั้งถ้าหาเรื่องเปลี่ยน

คุณลืมที่จะถามสิ่งที่เกี่ยวกับผลตอบแทนภายใน useEffect ... มันใช้สำหรับการล้างข้อมูลมันจะทำงานเมื่อส่วนประกอบลงจากหลังม้า