thuộc tính data-reacttid trong html là gì?

Trong khi xem qua HTML của một số trang, tôi nhận thấy rằng một số trang sử dụng thuộc tính "data-reacttid" này như:

 <a data-reactid="......" ></a>

Thuộc tính đó là gì và chức năng của nó là gì?

Các data-reactidthuộc tính là một thuộc tính tùy chỉnh sử dụng để Phản ứng duy nhất có thể xác định các thành phần của nó trong DOM.

Điều này rất quan trọng vì các ứng dụng React có thể được hiển thị tại máy chủ cũng như máy khách. Nội bộ React xây dựng một bản trình bày các tham chiếu đến các nút DOM tạo nên ứng dụng của bạn (phiên bản đơn giản hóa ở bên dưới).

{
  id: '.1oqi7occu80',
  node: DivRef,
  children: [
    {
      id: '.1oqi7occu80.0',
      node: SpanRef,
      children: [
        {
          id: '.1oqi7occu80.0.0',
          node: InputRef,
          children: []
        }
      ]
    }
  ]
}

Không có cách nào để chia sẻ các tham chiếu đối tượng thực tế giữa máy chủ và máy khách và việc gửi một phiên bản tuần tự hóa của toàn bộ cây thành phần có khả năng tốn kém. Khi ứng dụng được hiển thị tại máy chủ và React được tải ở máy khách, dữ liệu duy nhất mà nó có là các data-reactidthuộc tính.

<div data-reactid='.loqi70ccu80'>
  <span data-reactid='.loqi70ccu80.0'>
    <input data-reactid='.loqi70ccu80.0' />
  </span>
</div>

Nó cần có khả năng chuyển đổi trở lại cấu trúc dữ liệu ở trên. Cách nó làm điều đó là với các data-reactidthuộc tính duy nhất . Điều này được gọi là thổi phồng cây thành phần.

Bạn cũng có thể nhận thấy rằng nếu React hiển thị ở phía máy khách, nó sẽ sử dụng data-reactidthuộc tính, mặc dù nó không cần phải mất các tham chiếu của nó. Trong một số trình duyệt, nó chèn ứng dụng của bạn vào DOM bằng cách sử dụng .innerHTMLsau đó nó sẽ thổi phồng cây thành phần ngay lập tức, như một biện pháp tăng hiệu suất.

Sự khác biệt thú vị khác là các id React được hiển thị từ phía máy khách sẽ có định dạng số nguyên tăng dần (như .0.1.4.3), trong khi các id do máy chủ hiển thị sẽ có tiền tố là một chuỗi ngẫu nhiên (chẳng hạn như .loqi70ccu80.1.4.3). Điều này là do ứng dụng có thể được hiển thị trên nhiều máy chủ và điều quan trọng là không có xung đột. Ở phía máy khách, chỉ có một quy trình kết xuất, có nghĩa là các bộ đếm có thể được sử dụng để đảm bảo các id duy nhất.

document.createElementThay vào đó , React 15 sử dụng , vì vậy, đánh dấu được hiển thị từ ứng dụng khách sẽ không bao gồm các thuộc tính này nữa.

Đó là một thuộc tính html tùy chỉnh nhưng có thể trong trường hợp này được Thư viện Facebook React JS sử dụng.

Hãy xem: http://facebook.github.io/react/

Thuộc tính Dữ liệu tùy chỉnh trong HTML5

Xin trích dẫn bình luận của Ian trong câu trả lời của tôi:

Nó chỉ là một thuộc tính (một thuộc tính hợp lệ) trên phần tử mà bạn có thể sử dụng để lưu trữ dữ liệu / thông tin về nó.

Sau đó, mã này truy xuất nó sau đó trong trình xử lý sự kiện và sử dụng nó để tìm phần tử đầu ra đích. Nó lưu trữ một cách hiệu quả lớp của div nơi văn bản của nó sẽ được xuất ra.

reactidchỉ là một hậu tố, bạn có thể có bất kỳ tên ở đây ví dụ: data-Ayman.

Nếu bạn muốn tìm sự khác biệt, hãy kiểm tra các câu đố trong câu trả lời SO này và nhận xét .

các thuộc tính dữ liệu thường được sử dụng cho nhiều loại tương tác. Điển hình là thông qua javascript. Chúng không ảnh hưởng đến bất kỳ điều gì liên quan đến hành vi của trang web và là một phương pháp thuận tiện để truyền dữ liệu cho bất kỳ mục đích nào cần thiết. Đây là một bài báo có thể làm sáng tỏ mọi thứ:

http://ejohn.org/blog/html-5-data-attributes/

Bạn có thể tạo một thuộc tính dữ liệu bằng cách thêm tiền tố data-vào bất kỳ chuỗi an toàn thuộc tính tiêu chuẩn nào (chữ và số không có khoảng trắng hoặc ký tự đặc biệt). Ví dụ, data-idhoặc trong trường hợp nàydata-reactid

Đó là thuộc tính dữ liệu HTML. Xem phần này để biết thêm chi tiết: http://html5doctor.com/html5-custom-data-attributes/

Về cơ bản, nó chỉ là một vùng chứa dữ liệu tùy chỉnh của bạn trong khi vẫn làm cho HTML hợp lệ. Nó data-cộng với một số định danh duy nhất.