ตอบสนองuseRef
ตะขอ
useRef
Hook อนุญาตให้คุณคงค่าระหว่างการแสดงผล
สามารถใช้เพื่อเก็บค่าที่เปลี่ยนแปลงได้ซึ่งจะไม่ทำให้เกิดการเรนเดอร์ซ้ำเมื่ออัปเดต
สามารถใช้เพื่อเข้าถึงองค์ประกอบ DOM ได้โดยตรง
ไม่ก่อให้เกิดการแสดงผลซ้ำ
หากเราพยายามนับจำนวนครั้งที่แอปพลิเคชันของเราแสดงผลโดยใช้useState
Hook เราจะติดอยู่ในลูปที่ไม่มีที่สิ้นสุดเนื่องจากตัว 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
ใช้
เรียกใช้สิ่งนี้บนคอมพิวเตอร์ของคุณและลองพิมพ์อินพุตเพื่อดูจำนวนการเรนเดอร์ของแอปพลิเคชันที่เพิ่มขึ้น
การเข้าถึงองค์ประกอบ 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
มีการอัปเดตโดยการป้อนข้อความลงในช่องป้อนข้อมูล