co to jest atrybut data-actid w html?

Przeglądając kod HTML niektórych stron, zauważyłem, że niektóre z nich używają tego atrybutu „data -activeid”, na przykład:

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

Co to za atrybut i jaka jest jego funkcja?

data-reactidAtrybut jest atrybutem zwyczaj stosowany tak, że React można jednoznacznie zidentyfikować jego elementów w DOM.

Jest to ważne, ponieważ aplikacje React mogą być renderowane zarówno na serwerze, jak i na kliencie. Wewnętrznie React tworzy reprezentację odwołań do węzłów DOM, które tworzą twoją aplikację (uproszczona wersja jest poniżej).

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

Nie ma możliwości współdzielenia rzeczywistych odwołań do obiektów między serwerem a klientem, a wysłanie serializowanej wersji całego drzewa komponentów jest potencjalnie kosztowne. Kiedy aplikacja jest renderowana na serwerze, a React jest ładowany na kliencie, jedynymi danymi, jakie posiada, są data-reactidatrybuty.

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

Musi mieć możliwość konwersji tego z powrotem do powyższej struktury danych. Sposób, w jaki to robi, polega na unikalnych data-reactidatrybutach. Nazywa się to nadmuchiwaniem drzewa komponentów.

Możesz również zauważyć, że jeśli React renderuje się po stronie klienta, używa data-reactidatrybutu, nawet jeśli nie musi tracić swoich odniesień. W niektórych przeglądarkach wstawia aplikację do DOM, .innerHTMLa następnie od razu rozszerza drzewo komponentów, aby zwiększyć wydajność.

Inną interesującą różnicą jest to, że identyfikatory React renderowane po stronie klienta będą miały przyrostowy format liczby całkowitej (jak .0.1.4.3), podczas gdy identyfikatory renderowane przez serwer będą poprzedzone losowym ciągiem znaków (takim jak .loqi70ccu80.1.4.3). Dzieje się tak, ponieważ aplikacja może być renderowana na wielu serwerach i ważne jest, aby nie było kolizji. Po stronie klienta istnieje tylko jeden proces renderowania, co oznacza, że ​​liczniki mogą być używane do zapewnienia unikalnych identyfikatorów.

document.createElementZamiast tego używa React 15 , więc znaczniki renderowane przez klienta nie będą już zawierać tych atrybutów.

Jest to niestandardowy atrybut html, ale prawdopodobnie w tym przypadku jest używany przez bibliotekę Facebook React JS.

Spójrz: http://facebook.github.io/react/

Atrybut danych niestandardowych w HTML5

Chciałbym zacytować komentarz Iana w mojej odpowiedzi:

To tylko atrybut (ważny) elementu, którego możesz użyć do przechowywania danych / informacji o nim.

Ten kod następnie pobiera go później w programie obsługi zdarzeń i używa go do znalezienia docelowego elementu wyjściowego. Skutecznie przechowuje klasę div, do której powinien być wyprowadzony tekst.

reactidto tylko przyrostek, możesz mieć tutaj dowolną nazwę, np data-Ayman. : .

Jeśli chcesz znaleźć różnicę, sprawdź skrzypce w tej odpowiedzi SO i skomentuj .

atrybuty danych są powszechnie używane w różnych interakcjach. Zwykle za pomocą javascript. Nie wpływają one na nic związanego z zachowaniem witryny i stanowią wygodną metodę przekazywania danych w dowolnym celu. Oto artykuł, który może wyjaśnić sprawę:

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

Atrybut danych można utworzyć, poprzedzając data-dowolny standardowy bezpieczny łańcuch atrybutów (alfanumeryczny bez spacji i znaków specjalnych). Na przykład data-idlub w tym przypadkudata-reactid

To jest atrybut danych HTML. Zobacz to, aby uzyskać więcej szczegółów: http://html5doctor.com/html5-custom-data-attributes/

Zasadniczo jest to po prostu kontener twoich niestandardowych danych, a HTML nadal jest prawidłowy. To data-plus jakiś unikalny identyfikator.