반응 조각 VS Div

Div 태그

<div>
   Hello world
</div>

vv는 원형 체인 htmldevelment-HTMLElement-Element-Node-Event Target를 가지고 있고 문서 세그먼트는 DocumentFragment-Node-Event Target를 가지고 있습니다.이것은 div에 더 많은 사용 가능한 방법과 속성이 있다는 것을 의미한다. (예를 들어 innerHTML)

반응 세션 탭

<React.Fragment>
   Hello world
</React.Fragment>

이 부분들은 포장기div를 제거합니다. 이것은 잘못된 HTML과 구성 요소 스타일의 문제를 초래할 수 있습니다. 게다가 그것들이 더 빠르고 DOM이 더 혼란스럽지 않기 때문에 사용할 가치가 있다고 생각합니다.

간단한 구문:

<>
   Hello world
</>

이 문법으로 키와 같은 속성을 추가할 수 없습니다.

반응 파편 우위

코드 가독성

JSX

이전에 구현할 수 없었던 기능 추가

더 좋은 의미 jsx 표기.포장기 원소는 강요에 의해 사용되지 않기 때문에 필요할 때 사용된다.

전체dom 표기 감소(렌더링 성능 향상, 메모리 비용 감소)

결론:
그것의 속도는 조금 빠르고 메모리 사용도 적다. (추가 DOM 노드를 만들 필요가 없다.)이것은 매우 크고 깊은 트리에서만 진정한 장점이 있지만, 응용 프로그램의 성능은 천 번의 삭감에 영향을 받는다.이것은 칼이 한 칼 빠진 것이다.
일부 CSS 메커니즘, 예를 들어 Flexbox와 CSS Grid는 특수한 부자 관계를 가지고 중간에div를 추가하여 논리 구성 요소를 추출할 때 필요한 레이아웃을 유지하기 어렵다.