React使用Fragment – ReactJS实战教程

上一章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从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>  
  )  
}