React useRefHook

useRefHook 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 kết xuất lại khi được cập nhật.

Nó có thể được sử dụng để truy cập trực tiếp vào một phần tử DOM.

Không gây ra kết xuất lại

Nếu chúng tôi cố gắng đếm số lần ứng dụng của chúng tôi hiển thị bằng useStateHook, chúng tôi sẽ bị mắc vào một vòng lặp vô hạn vì chính Hook này gây ra kết xuất lại.

Để tránh điều này, chúng ta có thể sử dụng useRefHook.

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()chỉ trả lại một mặt hàng. Nó trả về một Đối tượng được gọi current.

Khi chúng tôi khởi tạo , chúng tôi đặt giá trị ban đầu useRef:.useRef(0)

Chạy phần 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ần hiển thị ứng dụng tăng lên.

Truy cập các phần tử DOM

Nói chung, chúng tôi muốn để React xử lý tất cả các thao tác DOM.

Nhưng có một số trường hợp useRefcó thể được sử dụng mà không gây ra sự cố.

Trong React, chúng ta có thể thêm một refthuộc tính vào một phần tử để truy cập nó trực tiếp trong DOM.

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'));

Theo dõi các thay đổi trạng thái

useRefHook 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ì useRefcác giá trị giữa các lần hiển thị.

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'));

useStateLần này chúng tôi sử dụng kết hợp useEffectvà useRefđể theo dõi trạng thái trước đó.

Trong useEffect, chúng tôi đang cập nhật useRefgiá trị hiện tại mỗi khi giá trị inputValueđược cập nhật bằng cách nhập văn bản vào trường đầu vào.