[reactjs] React 16의 조각이 컨테이너 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>
  );
}

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

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

답변

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

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

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

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>