Phản ứng useRef Hook
useRef Hook cho phép bạn duy trì các giá trị giữa các lần hiển thị.
Nó có thể được sử dụng để lưu trữ một giá trị có thể thay đổi mà không gây ra hiện tượng hiển thị lại khi cập nhật.
Nó có thể được sử dụng để truy cập trực tiếp vào phần tử DOM.
Không gây ra kết xuất lại
Nếu chúng ta cố đếm số lần ứng dụng của chúng ta hiển thị bằng hook useState , chúng ta sẽ bị mắc vào một vòng lặp vô hạn vì chính Hook này gây ra việc hiển thị lại.
Để tránh điều này, chúng ta có thể sử dụng hook useRef .
Ví dụ:
Sử dụng useRef để theo dõi kết xuất ứng dụng.
import { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom/client"; 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> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); useRef() chỉ trả về một mục. Nó trả về một Object có tên là current .
Khi khởi tạo useRef , chúng ta đặt giá trị ban đầu: useRef(0) .
Nó giống như làm điều này: const count = {current: 0} . Chúng ta có thể truy cập số lượng bằng cách sử dụng count.current .
Chạy phần mềm này trên máy tính của bạn và thử nhập dữ liệu đầu vào để xem số lượng kết xuất của ứng dụng tăng lên.
Được chứng nhận!
$95 ĐĂNG KÝ
Truy cập các phần tử DOM
Nói chung, chúng tôi muốn để React xử lý mọi thao tác trên DOM.
Nhưng có một số trường hợp useRef có thể được sử dụng mà không gây ra sự cố.
Trong React, chúng ta có thể thêm thuộc tính ref vào một phần tử để truy cập trực tiếp vào DOM.
Ví dụ:
Sử dụng useRef để tập trung đầu vào:
import { useRef } from "react"; import ReactDOM from "react-dom/client"; function App() { const inputElement = useRef(); const focusInput = () => { inputElement.current.focus(); }; return ( <> <input type="text" ref={inputElement} /> <button onClick={focusInput}>Focus Input</button> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);Theo dõi thay đổi trạng thái
Hook useRef cũng có thể được sử dụng để theo dõi các giá trị trạng thái trước đó.
Điều này là do chúng tôi có thể duy trì các giá trị useRef giữa các lần hiển thị.
Ví dụ:
Sử dụng useRef để theo dõi các giá trị trạng thái trước đó:
import { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom/client"; 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> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); Lần này chúng tôi sử dụng kết hợp useState , useEffect và useRef để theo dõi trạng thái trước đó.
Trong useEffect , chúng tôi đang cập nhật giá trị hiện tại useRef mỗi khi inputValue được cập nhật bằng cách nhập văn bản vào trường đầu vào.
