[reactjs] React 16의 조각이 컨테이너 div보다 나은 이유는 무엇입니까?

Program / 글쓴이

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>
  );
}

두 경우 모두 내부 요소를 둘러싸는 컨테이너 요소가 여전히 필요합니다.

내 질문은 왜 Fragment바람직한 것을 사용하는 것 입니까? 성능에 도움이됩니까? 그렇다면 왜 그렇습니까? 통찰력을 사랑합니다.

답변

  1. 조금 더 빠르며 메모리 사용량이 적습니다 (추가 DOM 노드를 만들 필요가 없음). 이것은 매우 크고 깊은 나무에만 실질적인 이점이 있지만, 응용 프로그램 성능은 종종 수천 컷으로 인해 죽음으로 고통받습니다. 이것은 한 컷 덜입니다.
  2. Flexbox 및 CSS Grid와 같은 일부 CSS 메커니즘에는 특수한 부모-자식 관계 div가 있으며 중간에 s를 추가 하면 논리적 구성 요소를 추출하는 동안 원하는 레이아웃을 유지하기가 어렵습니다.
  3. DOM 관리자는 덜 복잡합니다. 🙂

이 React 문제에서 다른 사용 사례에 대한 설명을 찾을 수 있습니다. 렌더에서 여러 구성 요소를 반환하도록 프래그먼트 API 추가

답변

위의 모든 답변에 코드 가독성 , Fragment구성 요소는 구문 설탕 양식을 지원합니다 <>. 따라서 질문의 코드는 다음과 같이 더 쉽게 작성할 수 있습니다.

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

에 따르면 문서 ,

React <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>div 대신 가장 중요한 요구 사항은 HTML 의미를 깨뜨리지 않는 것입니다. 대신 div를 사용 <Fragment> </Fragment>하면 HTML 의미가 깨집니다.

html 의미에 대해 더 알고 싶습니다. 제발 클릭
하고 또한 사업부는이 코드의 예를 들어보기에 대한 잘못된 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>

조각은이 문제를 해결합니다.

답변

  1. 를 사용 <React.Fragment>...</React.Fragment>하면 DOM에 추가 노드를 추가하지 않고도 JSX 요소에 상위 태그를 추가 할 수 있습니다.
  2. 여분의 div 태그를 React.Fragment로 바꿀 수 있습니다.
  3. 매번 React.Fragment를 쓰기는 너무 길다. React.Fragment에는 사용할 수있는 간단한 구문이 있습니다. 그것은<>...</>.

답변