Refs trong React

Nếu chúng ta muốn lưu giữ một thông tin nào đó, nhưng không muốn việc thay đổi của nó kích hoạt render lại component, thì chúng ta sẽ cần đến refs và tương ứng là hook useRef, làm việc với chúng.

Ref (hoặc tham chiếu) là một đối tượng JavaScript thông thường với thuộc tính duy nhất current, mà bạn có thể đọc hoặc thay đổi.

Giống như state, refs có thể lưu trữ bất kỳ kiểu dữ liệu nào - đó có thể là số, chuỗi, đối tượng và thậm chí cả hàm.

Nếu dữ liệu của bạn được sử dụng cho việc render, hãy lưu trữ chúng trong state, còn nếu bạn không cần render, trong trường hợp đó việc sử dụng refs có thể trở nên hiệu quả hơn. Hơn nữa, không giống như state, giá trị của ref thay đổi ngay lập tức.

Nhìn chung, refs được áp dụng ở những nơi bạn cần rời khỏi React và tương tác với API bên ngoài - thường là API của trình duyệt, mà không ảnh hưởng đến việc hiển thị component. Điều này có thể là, ví dụ, lưu trữ id của bộ hẹn giờ hoặc lưu trữ một đối tượng, mà không cần tính toán JSX, nhưng thường xuyên nhất là tương tác với các phần tử DOM. Chúng có thể được dùng để quản lý tiêu điểm, chọn văn bản hoặc phát lại phương tiện đa phương tiện.

Trong bài học tiếp theo, chúng ta sẽ phân tích cách làm việc với refs và hook useRef trong thực tế.