반응 단편 : 성능을 향상시키기위한 간단한 구문

반응 조각 : 깊은 다이브

React 16.2.0에 도입 된 반응 단편은 DOM에 추가 노드를 추가하지 않고 HTML 요소를 그룹화하는 강력한 도구입니다. 이는 성능을 향상시키고 렌더링 된 HTML에서 불필요한 마크 업을 피합니다. 이 기사는 그들의 사용, 혜택 및 한계를 탐구합니다. 왜 반응 단편을 사용 하는가?

반응 구성 요소는 단일 요소를 이상적으로 반환합니다. 이전에는 개발자가 종종 래퍼 를 사용하여 여러 요소를 반환했습니다. 이것은 불필요한 중첩을 만들어 렌더링을 늦추고 잠재적으로 유효하지 않은 HTML을 초래했습니다 (예 : a ). 파편은 이것을 우아하게 해결합니다.

반응 단편 이해

조각은 렌더링 된 출력에 추가 마크 업을 도입하지 않고 다중 아동 구성 요소를 그룹화하는 방법을 제공합니다. 그들은 두 가지 방법을 사용하여 사용됩니다 :

<div> 명시 적 구문 : 태그 내에서 자식 요소를 포장합니다 속기 구문 : <code><div> 빈 각 브래킷 사용 . 참고 : 속기 구문은 키나 소품을 지원하지 않습니다 <code><tr> 반응 단편 사용 방법 <p> <strong> </strong> 요소를 반환하는 구성 요소를 고려하십시오 </p> <p> <the> 또는 속기 사용 : </the></p> <the> 이것은 <ol> 래퍼를 사용하여 생성 된 유효하지 않은 HTML을 피합니다. <li> 반응 단편을 사용하는시기 <strong> </strong> <when> 일반적으로 불필요한 래퍼 요소를 추가하여 구성 요소에서 여러 요소를 반환 할 때마다 조각을 사용하십시오. 주요 사용 사례는 다음과 같습니다 <code><react.fragment>...</react.fragment>

여러 요소를 포장 : 가장 일반적인 용도. 유효하지 않은 HTML을 피하고 구조를 향상시킵니다 <>...</> 키드 조각 :

JavaScript 컬렉션으로 작업 할 때 명시 적 구문을 사용하면 효율적인 렌더링을 위해 키를 조각에 할당 할 수 있습니다. 이것은 React의 조정 프로세스에 중요합니다.

조건부 렌더링 : 추가 랩퍼없이 True 및 False 분기 모두에서 여러 요소를 반환 할 수 있도록 조건부 렌더링을 단순화합니다.

제한 Columns <td> <and> 속기 구문은 키나 소품을 허용하지 않습니다 <ible> 16.2.0보다 오래된 반응 버전과 호환되지 않습니다 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function Columns() { return ( &lt;React.Fragment&gt; &lt;td&gt;Hello&lt;/td&gt; &lt;td&gt;World&lt;/td&gt; &lt;/React.Fragment&gt; ); }</pre><div class="contentsignin">로그인 후 복사</div></div> <🎜 🎜> <<> 결론 <p> </p> <ments> 반응 단편은 현대 반응 개발의 중요한 부분입니다. 그것들을 마스터하면 더 깨끗하고 효율적이며 유지 관리 가능한 코드로 이어집니다. 불필요한 DOM 노드를 피함으로써 응용 프로그램 성능 향상에 기여합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function Columns() { return ( &lt;&gt; &lt;td&gt;Hello&lt;/td&gt; &lt;td&gt;World&lt;/td&gt; &lt;/&gt; ); }</pre><div class="contentsignin">로그인 후 복사</div></div> 자주 묻는 질문 <p> <code><div><ul> 혜택 : <li> 클리너 코드, 성능 향상, 불필요한 DOM 노드를 피하십시오 전달 소품 : <strong> 조각에서 직접지지되지 않습니다. 대신 일반 구성 요소를 사용하십시오. </strong> 호환성 : </li>는 16.2 이상 반응이 필요합니다 <li> div vs. 단편 : <strong> 조각은 와 달리 추가 DOM 노드를 추가하지 않도록합니다. 키 : </strong> 명시 적 구문을 사용하여 키를 추가하십시오 JSX 표현식 : </li> 조각은 JSX 표현식 내에서 원활하게 작동합니다 React Native : <li> 조각은 반응 원시에서도 사용할 수 있습니다 수명주기 충격 : <strong> 조각은 구성 요소 수명주기에 영향을 미치지 않습니다 </strong> <ensive>이 포괄적 인 가이드는 프로젝트에서 반응 조각을 효과적으로 활용할 수 있어야합니다.</ensive> </li> </ul></div>