html의 data-reactid 속성은 무엇입니까?

일부 페이지의 HTML을 살펴 보는 동안 일부 페이지에서 다음과 같은 "data-reactid"속성을 사용하는 것을 발견했습니다.

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

그 속성은 무엇이며 그 기능은 무엇입니까?

data-reactid속성 때문에 사용하는 사용자 정의 속성입니다 반작용 고유 DOM 내 요소를 식별 할 수 있습니다.

이것은 React 애플리케이션 이 클라이언트뿐만 아니라 서버 에서도 렌더링 될 수 있기 때문에 중요 합니다 . 내부적으로 React는 애플리케이션을 구성하는 DOM 노드에 대한 참조 표현을 구축합니다 (간단한 버전은 아래 참조).

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

서버와 클라이언트간에 실제 개체 참조를 공유 할 수있는 방법이 없으며 전체 구성 요소 트리의 직렬화 된 버전을 보내는 것은 잠재적으로 비용이 많이 듭니다. 애플리케이션이 서버에서 렌더링되고 React가 클라이언트에서로드 될 때 가지고있는 유일한 데이터는 data-reactid속성입니다.

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

위의 데이터 구조로 다시 변환 할 수 있어야합니다. 그렇게하는 방법은 고유 한 data-reactid속성을 사용하는 것입니다. 이 호출됩니다 팽창 컴포넌트 트리를.

React가 클라이언트 측에서 렌더링하는 경우 data-reactid참조를 잃을 필요가 없더라도 속성을 사용한다는 것을 알 수 있습니다 . 일부 브라우저에서는 애플리케이션을 DOM에 삽입 .innerHTML한 다음 성능 향상을 위해 구성 요소 트리를 즉시 팽창시킵니다.

또 다른 흥미로운 차이점은 클라이언트 측에서 렌더링 된 React ID는 증분 정수 형식 (예 :)을 갖는 .0.1.4.3반면, 서버에서 렌더링 한 경우에는 임의의 문자열 (예 :)이 접두사로 붙습니다 .loqi70ccu80.1.4.3. 이는 애플리케이션이 여러 서버에 걸쳐 렌더링 될 수 있고 충돌이없는 것이 중요하기 때문입니다. 클라이언트 측에는 렌더링 프로세스가 하나뿐이므로 카운터를 사용하여 고유 한 ID를 보장 할 수 있습니다.

React 15 는 document.createElement대신을 사용 하므로 클라이언트 렌더링 마크 업은 더 이상 이러한 속성을 포함하지 않습니다.

커스텀 html 속성이지만 아마도이 경우 Facebook React JS Library에서 사용됩니다.

보세요 : http://facebook.github.io/react/

HTML5의 맞춤 데이터 속성

내 대답에 Ian의 의견을 인용하고 싶습니다.

요소에 대한 데이터 / 정보를 저장하는 데 사용할 수있는 요소의 속성 (유효한 속성) 일뿐입니다.

이 코드는 나중에 이벤트 핸들러에서이를 검색하고이를 사용하여 대상 출력 요소를 찾습니다. 텍스트가 출력되어야하는 div의 클래스를 효과적으로 저장합니다.

reactid접미사 일 뿐이며 여기에 어떤 이름도 지정할 수 있습니다 data-Ayman. 예 : .

차이점을 찾으려면이 답변과 의견 에서 바이올린을 확인하십시오 .

데이터 속성은 일반적으로 다양한 상호 작용에 사용됩니다. 일반적으로 자바 스크립트를 통해. 사이트 행동에 영향을 미치지 않으며 필요한 모든 목적을 위해 데이터를 전달하는 편리한 방법입니다. 다음은 문제를 해결할 수있는 기사입니다.

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

data-표준 속성 안전 문자열 (공백이나 특수 문자가없는 영숫자)을 접두사 로 지정하여 데이터 속성을 만들 수 있습니다 . 예를 들어, data-id또는이 경우data-reactid

이것이 HTML 데이터 속성입니다. 자세한 내용은 http://html5doctor.com/html5-custom-data-attributes/ 를 참조하십시오 .

기본적으로 HTML을 유효하게 만드는 동안 사용자 지정 데이터의 컨테이너 일뿐입니다. 여기에 data-고유 한 식별자가 추가됩니다.