html에서 data-signid 속성은 무엇입니까?

html에서 data-signid 속성은 무엇입니까?

일부 페이지의 HTML을 검토하던 중 다음과 같은 "data-reactid" 속성을 사용하는 페이지를 발견했습니다.

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

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

그data-reactidattribute는 React가 DOM 내의 컴포넌트를 일의로 식별할 수 있도록 사용되는 커스텀 속성입니다.

React 어플리케이션은 클라이언트뿐만 아니라 서버에서도 렌더링할 수 있기 때문에 이것은 중요합니다.Internal 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이는 애플리케이션이 여러 서버에 걸쳐 렌더링될 수 있으며 충돌이 발생하지 않는 것이 중요하기 때문입니다.클라이언트 측에서는 렌더링 프로세스는 1개뿐입니다.즉, 카운터를 사용하여 일의의 ID를 확보할 수 있습니다.

대신 15개의 용도를 반응시켜 클라이언트가 렌더링한 마크업에 이러한 속성이 더 이상 포함되지 않도록 합니다.

이것은 커스텀 html 속성이지만, 이 경우 Facebook React JS 라이브러리에서 사용될 수 있습니다.

보기: http://facebook.github.io/react/

HTML5의 사용자 지정 데이터 속성

제 답변에 Ian의 의견을 인용하고 싶습니다.

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

이 코드는 나중에 이벤트핸들러로 취득해, 타겟 출력 요소를 검출하기 위해서 사용합니다.텍스트가 출력되어야 하는 div의 클래스를 효과적으로 저장합니다.

reactid는 접미사에 불과합니다.여기에는 다음과 같은 임의의 이름을 사용할 수 있습니다.data-Ayman.

차이를 찾으려면 이 SO 답변과 코멘트를 확인하십시오.

데이터 속성은 일반적으로 다양한 교호작용에 사용됩니다.보통 javascript를 통해.사이트의 동작에 대해서는 영향을 주지 않고, 어떠한 목적으로도 데이터를 건네주는 편리한 방법입니다.다음은 모든 것을 설명할 수 있는 기사입니다.

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

는 접두사로 할 수 .data-임의의 표준 Atribute safe string(스페이스나 특수문자를 포함하지 않는 문자)에 대응합니다.를 들어, 「」라고 하는 것은,data-id 이 는 「」입니다.data-reactid

HTML 데이터 속성입니다.상세한 것에 대하여는, http://html5doctor.com/html5-custom-data-attributes/ 를 참조해 주세요.

기본적으로 HTML을 유효하게 하면서 커스텀 데이터의 컨테이너에 불과합니다.입니다.data-★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

언급URL : https://stackoverflow.com/questions/17585787/whats-data-reactid-attribute-in-html