reactjs

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대신을 사용 하므로 클라이언트 렌더링 마크 업은 더 이상 이러한 속성을 포함하지 않습니다.