บทช่วย สอนตอบโต้

หน้าแรก แนะนำตัว ตอบสนอง เริ่มต้น ตอบสนอง ES6 React Render HTML ตอบโต้ JSX ส่วนประกอบปฏิกิริยา คลาสตอบโต้ ตอบสนองอุปกรณ์ประกอบฉาก ปฏิกิริยาเหตุการณ์ เงื่อนไขการตอบสนอง รายการตอบโต้ แบบฟอร์มตอบโต้ ตอบสนองเราเตอร์ บันทึกโต้ตอบ ตอบสนอง CSS จัดแต่งทรงผม ตอบสนอง Sass จัดแต่งทรงผม

ตะขอตอบสนอง

ตะขอคืออะไร? ใช้สถานะ ใช้เอฟเฟกต์ ใช้บริบท ใช้Ref ใช้ลด ใช้โทรกลับ ใช้บันทึก ตะขอแบบกำหนดเอง

แบบฝึกหัดตอบโต้

ตอบคำถาม แบบฝึกหัดตอบโต้ ใบรับรองปฏิกิริยา

ตอบสนองuseRefตะขอ


useRefHook อนุญาตให้คุณคงค่าระหว่างการแสดงผล

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

สามารถใช้เพื่อเข้าถึงองค์ประกอบ DOM ได้โดยตรง


ไม่ก่อให้เกิดการแสดงผลซ้ำ

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

เพื่อหลีกเลี่ยงปัญหานี้ เราสามารถใช้useRefตะขอได้

ตัวอย่าง:

ใช้useRefเพื่อติดตามการแสดงผลของแอปพลิเคชัน

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

useRef()ส่งคืนรายการเดียวเท่านั้น มันส่งคืนวัตถุที่เรียกว่าcurrent.

เมื่อเราเริ่มต้นuseRefเราตั้งค่าเริ่มต้น: useRef(0).

มันเหมือนกับการทำสิ่งนี้: const count = {current: 0}. เราสามารถเข้าถึงการนับโดยcount.currentใช้

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


w3schools CERTIFIED . 2022

ได้รับการรับรอง!

ทำโมดูล React ทำแบบฝึกหัด ทำข้อสอบ และได้รับการรับรองจาก w3schools!!

$95 ลงทะเบียน

การเข้าถึงองค์ประกอบ DOM

โดยทั่วไป เราต้องการให้ React จัดการกับการจัดการ DOM ทั้งหมด

แต่มีบางกรณีที่useRefสามารถใช้งานได้โดยไม่มีปัญหา

ใน React เราสามารถเพิ่มrefแอตทริบิวต์ให้กับองค์ประกอบเพื่อเข้าถึงได้โดยตรงใน DOM

ตัวอย่าง:

ใช้useRefเพื่อเน้นอินพุต:

import { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));


ติดตามการเปลี่ยนแปลงสถานะ

ตะขอ ยังuseRefสามารถใช้เพื่อติดตามค่าสถานะก่อนหน้า

เนื่องจากเราสามารถคงuseRefค่าระหว่างการแสดงผลได้

ตัวอย่าง:

ใช้useRefเพื่อติดตามค่าสถานะก่อนหน้า:

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

ครั้งนี้เราใช้การรวมกันของuseState, useEffectและuseRefเพื่อติดตามสถานะก่อนหน้า

ในuseEffectเรากำลังอัปเดตuseRefค่าปัจจุบันทุกครั้งที่inputValueมีการอัปเดตโดยการป้อนข้อความลงในช่องป้อนข้อมูล