React使用Fragment – ReactJS实战教程 reactfragment|React

上一章ReactJS实战教程请查看：React Refs的作用和用法详解
在React中，无论何时你希望在屏幕上渲染某些内容，都需要在组件中使用渲染方法，此渲染方法可以返回单个元素或多个元素，render方法一次只渲染其中的一个根节点。但是，如果希望返回多个元素，render方法将需要一个“div”标记，并将整个内容或元素放在其中。DOM的这个额外节点有时会导致HTML输出的格式错误，也不受许多开发人员的欢迎。
例子

// 使用div渲染 class App extends React.Component { render() { return ( //无关的div元素 < div> < h2> Hello World! < /h2> < p> Welcome to the srcmini. < /p> < /div> ); } }

【React使用Fragment – ReactJS实战教程】为了解决这个问题，React从16.2及以上版本引入了片段Fragment，Fragment片段允许你对一组子列表进行分组，而无需向DOM添加额外的节点。
语法

< React.Fragment> < h2> child1 < /h2> < p> child2 < /p> .. ..... .... ... < /React.Fragment>

例子

// 使用fragments标签渲染 class App extends React.Component { render() { return ( < React.Fragment> < h2> Hello World! < /h2> < p> Welcome to the srcmini. < /p> < /React.Fragment> ); } }

为什么我们使用片段Fragment？使用Fragment标签的主要原因是:

与div标记相比，它使代码的执行速度更快。
它占用的内存更少。

片段Fragment短语法还有另一种简写方法用于为上述方法声明片段，它看起来像一个空标签，我们可以使用'< >’ 和’ 而不是’ React.fragment ‘ 。
例子

//短语法渲染 class Columns extends React.Component { render() { return ( < > < h2> Hello World! < /h2> < p> Welcome to the srcmini< /p> < /> ); } }

带有key的fragment片段简写语法不接受key属性，你需要一个将集合映射到片段fragment数组(如创建描述列表)的key。如果需要提供eky，则必须使用显式的声明< React.Fragment> 语法。
注意：Key是片段中唯一可以传递的属性。
例子

Function= (props) { return ( < Fragment> {props.items.data.map(item => ( // 如果没有“key”，React会给出一个key警告 < React.Fragment key={item.id}> < h2>{item.name}< /h2> < p>{item.url}< /p> < p>{item.description}< /p> < /React.Fragment> ))} < /Fragment> ) }