React useEvent: การรักษาเสถียรภาพของตัวจัดการเหตุการณ์สำหรับแอปพลิเคชันที่แข็งแกร่ง

การใช้ `useEvent` ในทางปฏิบัติ

มาทบทวนตัวอย่างก่อนหน้านี้และใช้ `useEvent` เพื่อแก้ไขปัญหา

การแก้ไขการปิดสถานะที่ล้าสมัย

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

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

ตอนนี้ `handleClick` เป็นฟังก์ชันที่เสถียร แต่เมื่อถูกเรียกใช้ จะเข้าถึงค่าล่าสุดของ `count` ผ่าน ref สิ่งนี้ป้องกันปัญหาการปิดสถานะที่ล้าสมัย

การป้องกันการเรนเดอร์ใหม่ที่ไม่จำเป็น

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

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

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

เนื่องจาก `handleClick` เป็น function reference ที่เสถียร `ChildComponent` จะเรนเดอร์ใหม่ก็ต่อเมื่อ props *จริงๆ* เปลี่ยนแปลงเท่านั้น ซึ่งจะช่วยปรับปรุงประสิทธิภาพ

การใช้งานทางเลือกและข้อควรพิจารณา

`useEvent` ที่มี `useLayoutEffect`

ในบางกรณี คุณอาจต้องใช้ `useLayoutEffect` แทน `useEffect` ภายใน `useEvent` implementation `useLayoutEffect` ทำงานพร้อมกันหลังจาก DOM mutations ทั้งหมด แต่ก่อนที่เบราว์เซอร์จะมีโอกาส paint สิ่งนี้อาจมีความสำคัญหากตัวจัดการเหตุการณ์จำเป็นต้องอ่านหรือแก้ไข DOM ทันทีหลังจากที่เหตุการณ์ถูกทริกเกอร์ การปรับนี้ช่วยให้มั่นใจได้ว่าคุณจะจับ DOM state ที่เป็นปัจจุบันที่สุดภายในตัวจัดการเหตุการณ์ของคุณ ป้องกันความไม่สอดคล้องกันที่อาจเกิดขึ้นระหว่างสิ่งที่คอมโพเนนต์ของคุณแสดงและข้อมูลที่ใช้ การเลือกระหว่าง `useEffect` และ `useLayoutEffect` ขึ้นอยู่กับข้อกำหนดเฉพาะของตัวจัดการเหตุการณ์ของคุณและเวลาในการอัปเดต DOM

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

ข้อควรระวังและปัญหาที่อาจเกิดขึ้น

• ความซับซ้อน: แม้ว่า `useEvent` จะแก้ปัญหาเฉพาะ แต่ก็เพิ่มความซับซ้อนให้กับโค้ดของคุณ การทำความเข้าใจแนวคิดพื้นฐานเป็นสิ่งสำคัญเพื่อให้ใช้งานได้อย่างมีประสิทธิภาพ
• การใช้งานมากเกินไป: อย่าใช้ `useEvent` โดยไม่เลือกหน้า เพียงใช้เมื่อคุณพบการปิดสถานะที่ล้าสมัยหรือการเรนเดอร์ใหม่ที่ไม่จำเป็นที่เกี่ยวข้องกับตัวจัดการเหตุการณ์
• การทดสอบ: การทดสอบคอมโพเนนต์ที่ใช้ `useEvent` ต้องให้ความสนใจอย่างรอบคอบเพื่อให้แน่ใจว่าตรรกะของ handler ที่ถูกต้องกำลังถูกดำเนินการ คุณอาจต้องจำลอง `useEvent` hook หรือเข้าถึง `handlerRef` โดยตรงในการทดสอบของคุณ

มุมมองระดับโลกเกี่ยวกับการจัดการเหตุการณ์

เมื่อสร้างแอปพลิเคชันสำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาความแตกต่างทางวัฒนธรรมและข้อกำหนดด้านการเข้าถึงในการจัดการเหตุการณ์:

• การนำทางด้วยแป้นพิมพ์: ตรวจสอบให้แน่ใจว่าองค์ประกอบแบบโต้ตอบทั้งหมดสามารถเข้าถึงได้ผ่านการนำทางด้วยแป้นพิมพ์ ผู้ใช้ในภูมิภาคต่างๆ อาจพึ่งพาการนำทางด้วยแป้นพิมพ์เนื่องจากความพิการหรือความชอบส่วนตัว
• Touch Events: รองรับ touch events สำหรับผู้ใช้บนอุปกรณ์มือถือ พิจารณาภูมิภาคที่การเข้าถึงอินเทอร์เน็ตบนมือถือแพร่หลายมากกว่าการเข้าถึงเดสก์ท็อป
• Input Methods: ระลึกถึง input methods ที่แตกต่างกันที่ใช้ทั่วโลก เช่น input methods ของจีน ญี่ปุ่น และเกาหลี ทดสอบแอปพลิเคชันของคุณด้วย input methods เหล่านี้เพื่อให้แน่ใจว่าเหตุการณ์ได้รับการจัดการอย่างถูกต้อง
• การเข้าถึง: ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดด้านการเข้าถึงเสมอ โดยตรวจสอบให้แน่ใจว่าตัวจัดการเหตุการณ์ของคุณเข้ากันได้กับโปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลืออื่นๆ สิ่งนี้มีความสำคัญอย่างยิ่งสำหรับประสบการณ์ผู้ใช้ที่ครอบคลุมในภูมิหลังทางวัฒนธรรมที่หลากหลาย
• Time Zones and Date/Time Formats: เมื่อจัดการกับเหตุการณ์ที่เกี่ยวข้องกับวันที่และเวลา (เช่น เครื่องมือจัดตารางเวลา ปฏิทินนัดหมาย) โปรดระลึกถึง time zones และ date/time formats ที่ใช้ในภูมิภาคต่างๆ จัดเตรียมตัวเลือกให้ผู้ใช้ปรับแต่งการตั้งค่าเหล่านี้ตามสถานที่ตั้งของตน

ทางเลือกอื่นนอกเหนือจาก `useEvent`

แม้ว่า `useEvent` จะเป็นเทคนิคที่มีประสิทธิภาพ แต่ก็มีแนวทางอื่นในการจัดการตัวจัดการเหตุการณ์ใน React:

• Lifting State: บางครั้งวิธีแก้ปัญหาที่ดีที่สุดคือการยกระดับ state ที่ตัวจัดการเหตุการณ์ขึ้นอยู่กับคอมโพเนนต์ระดับที่สูงขึ้น สิ่งนี้สามารถลดความซับซ้อนของตัวจัดการเหตุการณ์และขจัดการใช้ `useEvent`
• `useReducer`:** หากตรรกะ state ของคอมโพเนนต์ของคุณซับซ้อน `useReducer` สามารถช่วยจัดการ state updates ได้อย่างคาดการณ์ได้มากขึ้น และลดโอกาสในการปิดสถานะที่ล้าสมัย
• Class Components: แม้ว่าจะพบน้อยใน React สมัยใหม่ แต่ class components เป็นวิธีที่เป็นธรรมชาติในการผูกตัวจัดการเหตุการณ์กับคอมโพเนนต์ instance หลีกเลี่ยงปัญหาการปิดสถานะ
• Inline Functions with Dependencies: ใช้ inline function calls ที่มี dependencies เพื่อให้แน่ใจว่าค่าใหม่จะถูกส่งไปยังตัวจัดการเหตุการณ์ `onClick={() => handleClick(arg1, arg2)}` ที่มี `arg1` และ `arg2` อัปเดตผ่าน state จะสร้าง anonymous function ใหม่ในการเรนเดอร์แต่ละครั้ง ดังนั้นจึงมั่นใจได้ว่าค่าการปิดสถานะจะได้รับการอัปเดต แต่จะทำให้เกิดการเรนเดอร์ใหม่ที่ไม่จำเป็น ซึ่งเป็นสิ่งที่ `useEvent` แก้ไข