Refs được sử dụng như thế nào trong React?

Trong React, refs là một cách để truy cập trực tiếp một nút DOM hoặc một instance của một component từ bên trong component React. Refs thường được sử dụng khi bạn cần thực hiện các thao tác trực tiếp trên DOM hoặc khi cần truy cập trực tiếp đến một component con từ một component cha.

Cách tạo Refs

Trong React, bạn có thể tạo refs bằng cách sử dụng React.createRef() (trong React 16.3 trở lên) hoặc bằng cách sử dụng callback refs.

Sử dụng React.createRef()

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }
}

Sử dụng Callback Refs

class MyComponent extends React.Component {
  setMyRef = (element) => {
    this.myRef = element;
  }

  render() {
    return <div ref={this.setMyRef} />;
  }
}

Khi nào sử dụng Refs

1. Quản lý focus, chọn văn bản, hoặc phát media: Khi bạn cần quản lý focus hoặc chọn văn bản trong một input, hoặc muốn phát hoặc dừng một video hoặc âm thanh.
2. Kích hoạt các thao tác hoạt hình: Khi bạn cần thực hiện hoạt hình trực tiếp trên các phần tử DOM.
3. Tích hợp với thư viện DOM bên ngoài: Khi bạn cần tích hợp React với thư viện bên ngoài mà cần truy cập trực tiếp đến DOM.

Lưu ý khi sử dụng Refs

• Tránh sử dụng refs cho việc thực hiện logic xây dựng giao diện. Thay vào đó, hãy sử dụng state và props.
• Sử dụng refs một cách cẩn thận vì việc truy cập trực tiếp và thay đổi DOM có thể làm giảm hiệu suất và khả năng dự đoán của ứng dụng.
• Trong các component hàm, bạn có thể sử dụng Hook useRef để tạo refs.

Refs cung cấp một cách mạnh mẽ để tương tác với các phần tử DOM hoặc component con, nhưng cần được sử dụng một cách thông minh để không làm mất đi lợi ích của việc React quản lý DOM.