Trong React, refs (tham chiếu) là một tính năng quan trọng cho phép bạn truy cập trực tiếp vào các phần tử DOM hoặc các instance của component. Sử dụng refs đúng cách có thể giúp bạn quản lý DOM một cách hiệu quả và tối ưu hóa hiệu suất ứng dụng. Bài viết này sẽ cung cấp cho bạn cái nhìn chi tiết về refs trong React, cách sử dụng, và các tình huống cụ thể khi bạn nên hoặc không nên sử dụng refs.
Refs là gì?
Định Nghĩa Refs
Refs là viết tắt của “references” (tham chiếu), là một cách để truy cập trực tiếp vào các phần tử DOM hoặc các instance của component từ bên trong các component của React.
Tại Sao Sử Dụng Refs?
- Truy Cập DOM: Khi bạn cần truy cập và thao tác trực tiếp với các phần tử DOM.
- Quản Lý Thành Phần Con: Khi bạn cần truy cập hoặc tương tác với các instance của component con.
- Tối Ưu Hiệu Suất: Khi bạn cần tối ưu hóa hiệu suất bằng cách tránh các lần render không cần thiết.
Cách Sử Dụng Refs
Tạo Refs Bằng React.createRef()
Để tạo một ref, bạn sử dụng React.createRef() và gán nó vào thuộc tính ref của phần tử DOM hoặc component.
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current); // Truy cập trực tiếp vào DOM element
}
render() {
return <div ref={this.myRef}>Hello, world!</div>;
}
}
export default MyComponent;Sử Dụng Callback Refs
Bạn cũng có thể sử dụng callback refs để có nhiều quyền kiểm soát hơn khi quản lý refs.
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.setRef = element => {
this.myElement = element;
};
}
componentDidMount() {
console.log(this.myElement); // Truy cập trực tiếp vào DOM element
}
render() {
return <div ref={this.setRef}>Hello, world!</div>;
}
}
export default MyComponent;Sử Dụng Refs Trong Function Component với Hook useRef
Trong function component, bạn có thể sử dụng hook useRef để tạo và quản lý refs.
import React, { useRef, useEffect } from 'react';
const MyComponent = () => {
const myRef = useRef(null);
useEffect(() => {
console.log(myRef.current); // Truy cập trực tiếp vào DOM element
}, []);
return <div ref={myRef}>Hello, world!</div>;
};
export default MyComponent;Các Tình Huống Sử Dụng Refs
Truy Cập và Thao Tác DOM
Khi bạn cần truy cập hoặc thay đổi thuộc tính của một phần tử DOM, như thay đổi giá trị của một trường nhập liệu.
class Form extends Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
focusInput = () => {
this.inputRef.current.focus();
};
render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={this.focusInput}>Focus Input</button>
</div>
);
}
}
export default Form;Kích Hoạt Hoạt Ảnh (Animations)
Khi bạn cần điều khiển các hoạt ảnh một cách trực tiếp thông qua DOM.
import React, { useRef, useEffect } from 'react';
const AnimatedBox = () => {
const boxRef = useRef(null);
useEffect(() => {
const box = boxRef.current;
box.style.transition = 'transform 0.5s';
box.style.transform = 'translateX(100px)';
}, []);
return <div ref={boxRef} style={{ width: '100px', height: '100px', background: 'red' }}></div>;
};
export default AnimatedBox;Tích Hợp Với Thư Viện Bên Thứ Ba
Khi bạn cần tích hợp với các thư viện bên thứ ba mà yêu cầu truy cập trực tiếp vào DOM.
import React, { useRef, useEffect } from 'react';
import $ from 'jquery';
const JqueryComponent = () => {
const divRef = useRef(null);
useEffect(() => {
$(divRef.current).fadeIn();
}, []);
return <div ref={divRef} style={{ display: 'none' }}>Hello, jQuery!</div>;
};
export default JqueryComponent;Những Lưu Ý Quan Trọng Khi Sử Dụng Refs
Hạn Chế Sử Dụng Refs
Refs nên được sử dụng trong những tình huống đặc biệt khi bạn không thể làm điều đó với các phương pháp khác của React như state hoặc props.
Tránh Thay Đổi DOM Trực Tiếp
Nếu có thể, hãy tránh thay đổi DOM trực tiếp mà hãy sử dụng cơ chế cập nhật của React để đảm bảo rằng giao diện luôn đồng bộ với dữ liệu.
Cẩn Thận Khi Sử Dụng Trong Component Con
Khi truyền refs vào component con, hãy chắc chắn rằng component con hỗ trợ việc này và không gây ra các vấn đề không mong muốn.
Quản Lý Cuộc Sống của Refs
Luôn nhớ rằng refs có thể gây ra rò rỉ bộ nhớ nếu không được quản lý đúng cách. Hãy đảm bảo rằng bạn dọn dẹp các refs khi component bị hủy.
Kết Luận
Refs là một công cụ mạnh mẽ trong React cho phép bạn truy cập và thao tác trực tiếp với các phần tử DOM hoặc các instance của component. Bằng cách sử dụng refs một cách hợp lý và đúng lúc, bạn có thể tối ưu hóa hiệu suất và cải thiện trải nghiệm người dùng. Tuy nhiên, hãy sử dụng refs một cách cẩn thận và chỉ khi cần thiết để tránh các vấn đề tiềm ẩn.
Tham Khảo
- React Documentation on Refs
- MDN Web Docs on Using the React useRef Hook
- FreeCodeCamp Guide to React Refs
- Blog Posts and Tutorials on Medium
- Stack Overflow on React Refs
