React 16의 fragments가 container div보다 나은 이유는 무엇입니까?

React 16의 fragments가 container div보다 나은 이유는 무엇입니까?

React 16.2에서는, 다음의 서포트가 향상되었습니다.Fragments가 추가되었습니다.자세한 내용은 React 블로그 투고를 참조하십시오.

다음 코드는 누구나 잘 알고 있습니다.

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

네, 콘테이너 디바가 필요하긴 한데, 별거 아니에요.

React 16.2에서는 이를 통해 주변 용기 div를 방지할 수 있습니다.

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

어느 경우든 내부 요소를 둘러싼 컨테이너 요소가 여전히 필요합니다.

질문입니다. 왜 VIP를Fragment더 좋습니까?퍼포먼스에 도움이 됩니까?그렇다면 왜?통찰력이 있으면 좋겠는데

1. 조금 더 빠르고 메모리 사용량이 적습니다(추가 DOM 노드를 생성할 필요가 없습니다).이는 매우 크거나 깊은 트리에만 실질적인 이점이 있지만, 애플리케이션 성능은 종종 수천 번의 삭감으로 인해 저하됩니다.이게 한 컷 적네요.
2. Flexbox 및 CSS Grid와 같은 일부 CSS 메커니즘은 특별한 부모-자녀 관계를 가지며,div중앙의 를 사용하면 논리 컴포넌트를 추출할 때 원하는 레이아웃을 유지하는 것이 어려워집니다.
3. DOM 인스펙터가 덜 복잡합니다. :- )

다른 사용 사례에 대한 설명은 이 React 문제에서 확인할 수 있습니다.렌더에서 여러 구성 요소를 반환할 수 있도록 fragment API 추가

위의 모든 답변에 한 가지 장점이 더 있습니다. 코드 가독성,Fragment성분은 통사적인 설탕 형태를 지지한다.<>따라서 질문의 코드를 다음과 같이 쉽게 작성할 수 있습니다.

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

의사들에 따르면

리액트에서는 이 디스거가<React.Fragment/>이전 섹션의 예시와 같이 요소를 지정합니다.(JSX를 사용하는 비반응 프레임워크는 다른 것으로 컴파일될 수 있습니다.)

깔끔하죠?

이 경우에도 다음 명령어를 사용해야 합니다.<Fragment>구문을 지정할 필요가 있는 경우)key파편까지.

• JSX에서는 이전에 추가할 수 없는 기능
• 시멘틱 jsx 마크업이 향상되었습니다.래퍼 요소는 강제로 사용되기 때문이 아니라 필요할 때 사용됩니다.
• 전체적인 돔 마크업 감소(렌더 퍼포먼스 향상 및 메모리 오버헤드 감소)

래퍼 요소가 필요하지 않을 때 강제로 사용할 필요가 없는 것처럼 간단합니다.요소를 적게 갖는 것은 좋지만, 이전에는 불가능했던 요소를 jsx로 렌더링할 수 있고 래퍼 요소에 더 나은 의미적 의미를 부여할 수 있다는 것이 가장 큰 장점이라고 생각합니다. 왜냐하면 그것들은 이제 옵션이기 때문입니다.

이전에는 이 작업이 불가능했습니다.

 <select>
    {this.renderOptions()}
 </select>

React 15에서 다음을 보면 래퍼 요소가 필요한지 여부를 알 수 없습니다.

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>

reactjs.org 문서에 따르면 가장 중요한 요구는<Fragment> </Fragment>semantics.div는 html semantics를 을 피하기 위한 입니다.div를 하는 <Fragment> </Fragment>HTML html html html html 、 [ HTML ]

html 의미론에 대해 자세히 알아보기.를 클릭해 주세요.또, fragments 대신에 div 를 사용하면, html 가 무효가 되는 경우도 있습니다.예를 들면, 다음의 코드를 봐 주세요.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

<table>
      <tr>
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      </tr>
 </table>

fragment가 이 문제를 해결합니다.

React를 사용할 때 여러 요소를 렌더링하거나 관련 항목 그룹을 반환해야 하는 경우가 있습니다.들자면, '하다' 입니다.

function App() {
  return (
    <h1>Hello React!</h1>
    <h1>Hello React Again!</h1>
  );
}

위의 코드를 사용하여 앱을 실행하려고 하면 인접한 JSX 요소를 둘러싸인 태그로 감싸야 한다는 오류가 발생합니다.이는 부모 div 내에서 두 요소를 모두 줄바꿈해야 함을 의미합니다.

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
      <h1>Hello React Again!</h1>
    </div>
  );
}

이렇게 하면 오류가 수정되지만 어느 정도의 위험이 수반됩니다.DOM 에 노드를 추가하고 있습니다.이것은 불필요합니다.이와 같은 경우, 위의 것이 부모 컴포넌트 내에 봉입되는 자 컴포넌트인 경우, 이것이 문제가 됩니다.

function Table() {
  return (
    <table>
      <td>This is a Table Component</td>
      <Columns />
    </table>
  );
}

function Columns() {
  return (
    <div>
      <td>Hello React!</td>
      <td>Hello React Again!</td>
    </div>
  );
}

추가된 div로 인해 Table 컴포넌트에 대한 결과 HTML이 비활성화됩니다.

function Table() {
  return (
    <table>
      <td>This is a Table Component</td>
      <div>
        <td>Hello React!</td>
        <td>Hello React Again!</td>
      </div>      
    </table>
  );
}

이제 리액트 프래그먼트(Resact Fragment)를 사용하여 DOM에 노드를 추가하지 않고 이 문제를 해결하는 더 나은 방법을 살펴보겠습니다.구문은 다음과 같습니다.

function Columns() {
  return (
    <React.Fragment>
      <td>Hello React!</td>
      <td>Hello React Again!</td>
    </React.Fragment>
  );
}

프래그먼트 선언에는 <</>>의 짧은 구문을 사용할 수도 있습니다.

function Columns() {
  return (
    <>
      <td>Hello React!</td>
      <td>Hello React Again!</td>
    </>
  );
}

1. 「」를 사용합니다.<React.Fragment>...</React.Fragment>DOM에 노드를 추가하지 않고 JSX 요소에 부모 태그를 추가할 수 있습니다.
2. 추가 div 태그를 React로 바꿀 수 있습니다.단편화
3. 은 매번 가 너무요.매번 조각이 당신에게는 너무 길다.React.Fragment: 리액트.렇렇 it it it it 。<>...</>.

컴포넌트를 그룹화하고 싶지만 생성된 HTML에서 div 태그 HTML을 원하지 않을 경우 fragment를 사용할 수 있습니다.으로 <> <p> Hello </p> </> 이런 거예요.<p> Hello </p>

컨테이너를했다면 div <div>…</div>생성될 것입니다!

언급URL : https://stackoverflow.com/questions/47761894/why-are-fragments-in-react-16-better-than-container-divs