Fragments （ React ）

原来写组件必须有一个div包着，但是组件 过多就会对渲染造成无形的负担所以用这个Fragments

Fragments

React 中的一个常见模式时一个和组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

render() {
	return (
		<React.Fragment>
			<ChildA />
			<ChildB />
			<ChildC />
		</React.Fragment>
	);
}

动机

一种常见模式时组件返回一个子元素列表。 以此 React 代码片段为例：

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

<Columns />需要返回多个 <td> 元素以使渲染的 HTML 有效。如果在<Columns />的render() 中使用了父 div ，则生成的 HTML 将无效。

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

得到一个 <Table /> 输出:

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

Fragments 解决了这个问题。

用法

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

这样可以正确的输出 <Table />:

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

短语法

你可以使用一种新的，且更简短的语法来声明 Fragments。

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

它不支持 key或属性。但并不是所有脚手架都可以支持这种写法，有的就会编译错误。（比如 create react app ）

带 key 的Fragments

使用显式 <React.Fragment>语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 -举个例子，创建一个描述列表：

function Glossary (props){
	return (
		<dl>
			{props.items.map(item => (
				//没有‘key’，React 会发出一个关键警告
				<React.Fragment key={item.id}>
					<dt>{item.term}</dt>
					<dt>{item.description]</dt>
				</Rwact.Fragment>	
			))}
		</dl>	
	);
}

key 是唯一可以传递给 Fragment 的属性。未来我们可能会添加对其他属性的支持，例如事件。