React——Fragments特性

為什麼要用Fragments

在我們使用React開發元件的時候，每個React元件都必須傳回一個根元素。例如下面這樣：

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

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

在正常的HTML行文中，<tr>标簽與<td>标簽之間的<div>标簽是不應該存在的。

雖然在這個小小的例子中，我們可以将tr标簽移入到Columns中去解決這個問題，但是在錯綜複雜的業務層級代碼中，我們經常會遇到希望一個元件傳回多個并列标簽的情況。

為了解決這個問題，React在16.x版本新推出了一個Fragments特性——元件碎片化。Fragments的使用方法非常簡單，我們将Column元件稍作改造即可：

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

這樣，在最終渲染成Dom後，并不會出現任何與HTML行文不符的标簽。

簡寫與注意事項

除了React.Fragment這樣的寫法，React還推薦使用更加明了的簡短寫法：

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

需要注意的是：這樣的寫法不支援傳遞任何參數，而且某些編譯器或者編譯工具并不支援這種寫法。

在隊列中使用

一個React元素除了直接寫成一個元件，也可以在隊列中傳回。Fragment标簽使用到隊列中同樣也要

使用key屬性來标記隊列的位置

：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}