일부 페이지의 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
대신을 사용 하므로 클라이언트 렌더링 마크 업은 더 이상 이러한 속성을 포함하지 않습니다.
답변
답변
답변
데이터 속성은 일반적으로 다양한 상호 작용에 사용됩니다. 일반적으로 자바 스크립트를 통해. 사이트 행동에 영향을 미치지 않으며 필요한 모든 목적을 위해 데이터를 전달하는 편리한 방법입니다. 다음은 문제를 해결할 수있는 기사입니다.
http://ejohn.org/blog/html-5-data-attributes/
data-
표준 속성 안전 문자열 (공백이나 특수 문자가없는 영숫자)을 접두사 로 지정하여 데이터 속성을 만들 수 있습니다 . 예를 들어, data-id
또는이 경우data-reactid
답변
이것이 HTML 데이터 속성입니다. 자세한 내용은 http://html5doctor.com/html5-custom-data-attributes/ 를 참조하십시오 .
기본적으로 HTML을 유효하게 만드는 동안 사용자 지정 데이터의 컨테이너 일뿐입니다. 여기에 data-
고유 한 식별자가 추가됩니다.