บทความนี้จะให้ความเข้าใจเชิงลึกเกี่ยวกับ React Hooks!

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: Enter Learning

Preface

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

Hooks คืออะไร

Hooks แปลว่า hooks เป็นฟังก์ชันภายในส่วนประกอบของฟังก์ชันที่รับผิดชอบในการเชื่อมต่อกับฟังก์ชันภายนอก

React มี hooks ทั่วไปบางส่วน และ React ยังรองรับ hooks แบบกำหนดเองอีกด้วย

เมื่อเราต้องการแนะนำฟังก์ชันภายนอกให้กับส่วนประกอบ เราสามารถใช้ hooks ที่ได้รับจาก React หรือปรับแต่ง hooks ได้

ตัวอย่างเช่น หากคุณแนะนำฟังก์ชันการจัดการสถานะในส่วนประกอบ คุณสามารถใช้ฟังก์ชัน useState ได้ในรายละเอียดด้านล่าง

เหตุใดจึง

ต้องใช้ Hooks มีเหตุผลสองประการในการใช้ Hooks:

• เพื่อลดความซับซ้อนของการใช้ตรรกะซ้ำ
• เพื่อทำให้ส่วนประกอบที่ซับซ้อนเข้าใจได้ง่ายขึ้น

1. ลดความซับซ้อนของการใช้ตรรกะซ้ำ

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

Hooks ช่วยให้เราใช้ตรรกะสถานะซ้ำได้โดยไม่ต้องแก้ไขโครงสร้างส่วนประกอบ การใช้งาน Hooks แบบกำหนดเองจะมีรายละเอียดด้านล่าง

2. ทำให้ส่วนประกอบที่ซับซ้อนเข้าใจได้ง่ายขึ้น

ในคลาสส่วนประกอบ รหัสสำหรับตรรกะทางธุรกิจเดียวกันจะกระจัดกระจายไปตามฟังก์ชันวงจรชีวิตที่แตกต่างกันของส่วนประกอบ และ Hooks สามารถรวมโค้ดสำหรับตรรกะทางธุรกิจเดียวกันเข้าด้วยกัน ซึ่งช่วยให้ตรรกะทางธุรกิจสามารถ แยกออกจากกันอย่างชัดเจนทำให้เข้าใจและบำรุงรักษาโค้ดได้ง่ายขึ้น

4. Hooks ที่ใช้กันทั่วไป

1. useState

useState เป็น Hook ที่ให้คุณเพิ่มสถานะในส่วนประกอบของฟังก์ชัน React

ตัวอย่างการใช้งานมีดังนี้:

import React, { useState } จาก 'react';

ตัวอย่างฟังก์ชัน () {
  // ประกาศตัวแปรสถานะที่เรียกว่า "count" const [count, setCount] = useState(0);
  // ...

โค้ดข้างต้นประกาศการนับตัวแปรสถานะด้วยค่าเริ่มต้นเป็น 0 และอัพเดตการนับปัจจุบันโดยการเรียก setCount

2. useEffect

useEffect ช่วยให้คุณสามารถดำเนินการผลข้างเคียงในส่วนประกอบของฟังก์ชันได้

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

useEffect สามารถรับพารามิเตอร์ได้สองตัว โดยมีโค้ดดังต่อไปนี้:

useEffect(callback, dependencies)

พารามิเตอร์แรกคือการเรียกกลับของฟังก์ชันที่จะดำเนินการ และพารามิเตอร์ตัวที่สองคือการพึ่งพาอาร์เรย์ที่เป็นทางเลือก

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

ตัวอย่างการใช้งานมีดังนี้

ฟังก์ชั่น Example() {
  const [นับ setCount] = useState (0);

  // คล้ายกับcomponentDidMountและcomponentDidUpdate:
  useEffect(() => {
    // อัปเดตชื่อเอกสารโดยใช้เบราว์เซอร์ API
    document.title = `คุณคลิก ${count} ครั้ง`;

    กลับ () => {
        // สามารถใช้สำหรับการล้างข้อมูลได้เทียบเท่ากับcomponentWillUnmountของส่วนประกอบคลาส
    -

  }, [นับ]); // ระบุการพึ่งพาเป็นการนับและดำเนินการผลข้างเคียงเมื่อมีการอัปเดตการนับ // ...

โค้ดด้านบนใช้ useEffect เพื่อใช้ฟังก์ชันผลข้างเคียงเมื่อมีการอัปเดตการนับการพึ่งพาและล้างมัน โดยการส่งคืนฟังก์ชัน callback ผลการดำเนินการครั้งล่าสุด

นอกจากนี้ useEffect ยังมีการกำหนดเวลาสี่ครั้งสำหรับการดำเนินการผลข้างเคียง:

• ดำเนินการหลังจากการเรนเดอร์แต่ละครั้ง : ไม่มีการระบุพารามิเตอร์การพึ่งพาที่สอง ตัวอย่างเช่น useEffect(() => {});
• ดำเนินการหลังจากการเรนเดอร์ครั้งแรกเท่านั้น : จัดเตรียมอาร์เรย์ว่างเป็นสิ่งอ้างอิง ตัวอย่างเช่น useEffect(() => {}, []);
• ดำเนินการเป็นครั้งแรกและหลังจากการเปลี่ยนแปลงการอ้างอิง : จัดเตรียมอาร์เรย์ของการขึ้นต่อกัน ตัวอย่างเช่น useEffect(() => {}, [deps]);
• ดำเนินการหลังจากยกเลิกการต่อเชื่อมส่วนประกอบ : ส่งคืนฟังก์ชันการโทรกลับ ตัวอย่างเช่น useEffect() => { return () => {} }, [])

3. useCallback

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

ตัวอย่างการใช้งานมีดังนี้:

const memoizedCallback = useCallback(() => {
  ทำอะไรสักอย่าง (ก, ข)
}, [a, b])

โค้ดด้านบนจะประกาศฟังก์ชันการโทรกลับอีกครั้งเฉพาะเมื่อมีการเปลี่ยนแปลงการอ้างอิง a และ b

4. useMemo

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

ตัวอย่างการใช้งานมีดังต่อไปนี้:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

โค้ดข้างต้นจะถูกคำนวณใหม่เมื่อการอ้างอิง a และ b เปลี่ยนแปลงเท่านั้น

5. useRef

useRef ส่งคืนออบเจ็กต์อ้างอิง ซึ่งคงอยู่ตลอดวงจรชีวิตของส่วนประกอบ

มีประโยชน์สองประการ:

• บันทึกการอ้างอิงไปยังโหนด DOM
• การแชร์ข้อมูลระหว่างการเรนเดอร์หลายรายการ

ตัวอย่างวิธีการบันทึกโหนด DOM มีดังนี้:

ฟังก์ชัน TextInputWithFocusButton() {
  const inputEl = useRef (null)
  const onButtonClick = () => {
    // `current` ชี้ไปที่องค์ประกอบการป้อนข้อความ inputEl.current.focus() ที่ถูกเมานต์บน DOM
  -
  กลับ (
    -
      
      เน้นอินพุต
    -
  -
}

โค้ดข้างต้นจะสร้างวัตถุอ้างอิงผ่าน useRef บันทึกการอ้างอิงของโหนด DOM และสามารถดำเนินการ DOM บน ref.current ได้

ตัวอย่างการแบ่งปันข้อมูลระหว่างการเรนเดอร์หลายรายการมีดังนี้:

import React, { useState, useCallback, useRef } จาก 'react'

ส่งออกฟังก์ชันเริ่มต้น Timer() {
  //กำหนดสถานะเวลาเพื่อประหยัดเวลาสะสมของ timing const [time, setTime] = useState(0)

  // กำหนดตัวจับเวลา คอนเทนเนอร์ดังกล่าวใช้เพื่อบันทึกตัวแปรระหว่างการเรนเดอร์ข้ามองค์ประกอบ const timer = useRef(null)

  // ฟังก์ชันตัวจัดการเหตุการณ์เพื่อเริ่มจับเวลา const handleStart = useCallback(() => {
    // ใช้แอตทริบิวต์ปัจจุบันเพื่อตั้งค่าของ ref timer.current = window.setInterval(() => {
      setTime((เวลา) => เวลา + 1)
    }, 100)
  -

  //หยุดฟังก์ชันการจัดการเหตุการณ์เวลาชั่วคราว const handlePause = useCallback(() => {
    // ใช้ clearInterval เพื่อหยุดการจับเวลา window.clearInterval(timer.current)
    timer.current = null
  -

  กลับ (
    

      {เวลา / 10} วินาที
      

      เริ่ม
      หยุดชั่วคราว
    
  -
}

โค้ดด้านบนจะสร้างออบเจ็กต์อ้างอิงที่มีชื่อตัวแปรของตัวจับเวลาผ่าน useRef

6. useContext

useContext ใช้เพื่อรับวัตถุบริบทและส่งกลับค่าของบริบทซึ่งสามารถบรรลุการแบ่งปันข้อมูลข้ามระดับ

ตัวอย่างดังต่อไปนี้:

//สร้างวัตถุบริบท const MyContext = React.createContext(initialValue)
แอพฟังก์ชั่น () {
  กลับ (
    // ส่งค่าของบริบทผ่าน Context.Provider 
      <คอนเทนเนอร์ />
    
  -
-

ฟังก์ชั่นคอนเทนเนอร์ () {
  กลับ <ทดสอบ />
-

ทดสอบฟังก์ชัน() {
  // รับค่าของ Context const theme = useContext(MyContext) // 1
  กลับ 

}

โค้ดด้านบนได้รับบริบทที่กำหนดไว้ในองค์ประกอบของแอปผ่าน useContext บรรลุการแบ่งปันข้อมูลระหว่างส่วนประกอบแบบลำดับชั้น

7. useReducer

useReducer ใช้เพื่อแนะนำฟังก์ชันตัวลด

ตัวอย่างดังต่อไปนี้:

const [state, Dispatch] = useReducer(reducer, defaultState)

โดยยอมรับฟังก์ชันตัวลดและค่าเริ่มต้นของสถานะเป็นพารามิเตอร์และส่งกลับอาร์เรย์ สมาชิกตัวแรกของอาร์เรย์คือค่าปัจจุบันของสถานะ และสมาชิกตัวที่สองคือฟังก์ชันการจัดส่งที่ส่งการดำเนินการ

5. Hooks แบบกำหนดเอง

ผ่าน Hooks แบบกำหนดเอง ลอจิกส่วนประกอบสามารถแยกออกเป็นฟังก์ชันที่นำมาใช้ซ้ำได้

1. จะสร้าง Hooks แบบกำหนดเองได้อย่างไร?

Custom Hooks คือฟังก์ชันที่มีลักษณะเฉพาะสองประการที่แยกความแตกต่างจากฟังก์ชันทั่วไป:

• ชื่อขึ้นต้นด้วย "use";
• ฟังก์ชันเรียก Hooks อื่นๆ ภายใน

ตัวอย่างดังต่อไปนี้:

นำเข้า { useState, useCallback } จาก 'react'

ฟังก์ชั่น useCounter() {
  // กำหนดจำนวน สถานะนี้ใช้เพื่อบันทึกค่าปัจจุบัน const [count, setCount] = useState(0)
  // ดำเนินการเพิ่ม 1 const increase = useCallback(() => setCount(count + 1), [count])
  // ดำเนินการลดค่าลง 1 ครั้ง const decreation = useCallback(() => setCount(count - 1), [count])
  //รีเซ็ตตัวนับ const รีเซ็ต = useCallback(() => setCount(0), [])

  // ส่งออกการดำเนินการตรรกะทางธุรกิจเพื่อให้ผู้โทรใช้ return { นับ, เพิ่ม, ลด, รีเซ็ต }
-

// องค์ประกอบที่ 1
ฟังก์ชั่น MyComponent1() {
  const { นับ เพิ่ม ลด รีเซ็ต } = useCounter()
-

// องค์ประกอบที่ 2
ฟังก์ชั่น MyComponent2() {
  const { นับ เพิ่ม ลด รีเซ็ต } = useCounter()
}

โค้ดด้านบนนำตรรกะทางธุรกิจมาใช้ซ้ำระหว่างคอมโพเนนต์ MyComponent1 และคอมโพเนนต์ MyComponent2 ได้อย่างง่ายดายโดยการปรับแต่ง Hooks useCounter

2. ไลบรารี Hooks แบบกำหนดเอง - การใช้แบบโต้ตอบ

React จัดให้มีไลบรารีแบบใช้ปฏิกิริยาอย่างเป็นทางการ ซึ่งห่อหุ้ม Hooks แบบกำหนดเองจำนวนมากที่สามารถใช้งานได้โดยตรง ช่วยให้เราลดความซับซ้อนของตรรกะภายในของส่วนประกอบต่างๆ และปรับปรุงความสามารถในการอ่านและบำรุงรักษาโค้ด

หนึ่งในนั้นคือ Hooks แบบกำหนดเองที่ใช้กันทั่วไป ได้แก่:

• useLocation
• และ useSearchParam: ติดตามสถานะตำแหน่งของแถบนำทางของหน้า
• useScroll: ติดตามตำแหน่งการเลื่อนขององค์ประกอบ HTML;
• useScrolling: ติดตามว่าองค์ประกอบ HTML กำลังเลื่อนอยู่หรือไม่
• useAsyncRetry: แยกวิเคราะห์ฟังก์ชัน async;
• useTitle: ตั้งชื่อเรื่องของเพจ

คุณสามารถไปที่เว็บไซต์อย่างเป็นทางการของ React-use เพื่อเรียนรู้วิธีใช้งาน

6. สรุป

บทความนี้จะแนะนำ React Hooks จากสี่ประเด็น: Hooks คืออะไร ทำไมจึงต้องใช้ Hooks สิ่งที่ Hooks React ทั่วไปมีให้ และวิธีปรับแต่ง Hooks ฉันเชื่อว่าทุกคนมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับ React Hooks

หวังว่ามันจะช่วยคุณได้ ขอบคุณสำหรับการอ่าน ~