วิธีใช้ React useEffect

ทีมพัฒนาของ React ได้แนะนำแนวคิดของ Hooks ใน React เวอร์ชัน 16.8 React Hook อนุญาตให้ใช้สถานะและคุณสมบัติ React อื่น ๆ ในองค์ประกอบฟังก์ชัน ด้วย hook useState ส่วนประกอบของฟังก์ชันสามารถตั้งค่าสถานะภายในของตัวเองได้โดยไม่ต้องเขียนใหม่เป็นองค์ประกอบของคลาส

ดูคำแนะนำนี้เพื่อทบทวนความแตกต่างในคลาส React และส่วนประกอบการทำงาน

Hook ที่ใช้กันอย่างแพร่หลายใน React คือ useEffect ด้วย useEffect ผลข้างเคียง (หรือ "ผลกระทบ") จะดำเนินการจากบริบทของส่วนประกอบที่ใช้งานได้ โปรดจำไว้ว่าผลข้างเคียงเกิดขึ้นในฟังก์ชัน JavaScript เช่นกัน

ผลข้างเคียงเกิดขึ้นเมื่อฟังก์ชันเปลี่ยนแปลงบางสิ่งภายนอกร่างกาย ใน React จะเป็นสิ่งเดียวกันและรวมถึงการดึงข้อมูล สมัครรับข้อมูล หรือเปลี่ยน DOM จากส่วนประกอบ React มาก่อน

ใช้เอฟเฟกต์คืออะไร

React Hook useEffect ช่วยให้องค์ประกอบการทำงานสามารถดำเนินการผลข้างเคียงได้ มันทำงานในลักษณะเดียวกันกับวิธีการวงจรชีวิต componentDidMount, componentWillUpdate และ componentWillUnmount ในส่วนประกอบคลาส React อ้างอิงถึงบทนำนี้เกี่ยวกับวิธีวงจรชีวิต React สำหรับรายละเอียดเพิ่มเติม

ในบทความนี้ เราจะมาดูตัวอย่างเบื้องต้นเกี่ยวกับวิธีเริ่มใช้งาน Hooks บทความนี้มีวัตถุประสงค์เพื่อเป็นการแนะนำ ไม่ใช่เชิงลึก หากต้องการดู useEffect อย่างครอบคลุม โปรดอ่านภาพรวมนี้เมื่อคุณคุ้นเคยกับ React Hooks แล้ว

React Hooks ไวยากรณ์

เพื่อให้เข้าใจ useEffect อันดับแรก เราต้องอ่านไวยากรณ์สั้น ๆ สำหรับ useState Hook เมื่อใช้ Hooks จะต้องนำเข้าเช่นเดียวกับการนำเข้า React

import React, { useState, useEffect } from 'react';

ตอนนี้เราสามารถกำหนดองค์ประกอบการทำงานของเราด้วย Hooks ของเราได้ นี่คือการใช้ประโยชน์จากขอบเขตฟังก์ชัน JavaScript เมื่อเรากำหนด useEffect Hook ภายในองค์ประกอบการทำงาน มันจะสามารถเข้าถึงสถานะและอุปกรณ์ประกอบฉากผ่านขอบเขตได้ สำหรับขอบเขตเพิ่มเติม ให้ตรวจสอบกับไพรเมอร์นี้

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ไวยากรณ์ useState

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

import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'

  const ButtonCounter = () => {
    return (
      <button>Click Me</button>
    )
  }
    


ReactDOM.render(
  <ButtonCounter />,
  document.getElementById('container')
);

สิ่งนี้ทำให้ปุ่มของเราไปที่ DOM ก่อนที่เราจะกำหนด useEffect เราสามารถตั้งค่าสถานะเริ่มต้นของเราโดยกำหนด useState Hook

const [count, setCount] = useState(0);

โดยใช้ไวยากรณ์นี้ React จะตั้งค่าตัวแปรแรกเป็นสถานะเริ่มต้น ในกรณีนี้ ตัวแปร "นับ" ถูกกำหนดโดยอาร์กิวเมนต์ที่ส่งผ่านไปยัง useState React ได้ตั้งค่าสถานะเริ่มต้นของการนับเป็น 0 ตัวแปรที่สองจะถูกใช้เป็นฟังก์ชันในการอัปเดตการนับ

ตอนนี้เราได้ตั้งค่าสถานะเริ่มต้นของการนับเป็น 0 แล้ว เราสามารถใช้ฟังก์ชัน setCount เพื่ออัปเดตสถานะได้

const ButtonCounter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked the button {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

ด้วยการใช้ setCount ของเราเป็นฟังก์ชันเรียกกลับไปยังคุณสมบัติ onClick ของเรา เราสามารถอัปเดต DOM ทุกครั้งที่มีการคลิกปุ่ม

ซึ่งหมายความว่าฟังก์ชัน setCount ของเราตามที่กำหนดไว้เมื่อตั้งค่าสถานะเริ่มต้นของเราด้วย useState กำลังทำงาน! ตอนนี้เราได้เห็นไวยากรณ์สำหรับ useState Hook แล้ว มาดูที่ useEffect กัน

ไวยากรณ์ useEffect

ตามที่ระบุไว้ก่อนหน้านี้ useEffect กำหนดการใช้ผลข้างเคียง การเปลี่ยนแปลงส่วนประกอบผ่านการดึงข้อมูลและการเปลี่ยนแปลง DOM ด้วยตนเองถือเป็นผลข้างเคียง useEffect Hook ถูกเรียกทุกครั้งที่คอมโพเนนต์แสดงผล

มันทำงานคล้ายกับ componentDidMount และ componentDidUpdate ในส่วนประกอบคลาส React ต่อจากนี้ไปเราจะใช้ useEffect อัปเดต DOM โดยแสดงชื่อในองค์ประกอบ

const [count, setCount] = useState(0);
  const [name, setName] = useState(" ");

  useEffect(() => {
    setName(name + "Ryan")
  })
  return (
    <div>
      <p>Hello {name}! You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

นี่คือรหัสโดยเจตนาอย่างไม่ถูกต้อง สิ่งที่ถูกผลักไปที่ DOM จะพิสูจน์ว่า useEffect ถูกเรียกด้วยการเรนเดอร์องค์ประกอบแต่ละครั้ง

สิ่งนี้เกิดขึ้นเนื่องจากโดยค่าเริ่มต้น useEffect Hook จะทำงานเหมือนการรวมกันของ componentDidMount และ componentWillUpdate

เพื่อปรับแต่ง Hook ของเราให้แสดงผลเฉพาะเมื่อส่วนประกอบเชื่อมต่อ เราสามารถส่งอาร์กิวเมนต์ที่สองไปยัง useEffect โดยการส่ง useEffect ให้กับอาร์เรย์ว่าง ([]) เป็นอาร์กิวเมนต์ที่สอง React รู้ว่าจะเรียก useEffect เฉพาะเมื่อส่วนประกอบเมาต์เท่านั้น

useEffect(() => {
    setName(name + "Ryan")
  }, [])

ตอนนี้ เราควรเห็นสตริง “Ryan” ปรากฏขึ้นเมื่อส่วนประกอบการทำงานของเราต่อเชื่อมแล้วเท่านั้น

ยอดเยี่ยม! การทำความคุ้นเคยกับการใช้ Hooks จะใช้เวลาพอสมควร ด้วยเหตุนี้ เอกสาร React อย่างเป็นทางการจึงมีคำแนะนำที่อัปเดตเกี่ยวกับการใช้ Hooks อ่านได้ที่นี่

บทสรุป

ในการแนะนำ React useEffect Hook เราได้เรียนรู้ว่า Hooks คืออะไรและใช้งานอย่างไร นอกจากนี้เรายังครอบคลุมไวยากรณ์สำหรับ useState และ useEffect Hooks ด้วยตัวอย่างเบื้องต้นสำหรับแต่ละรายการ

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