Fragment的妙用，代替arr和div

Fragment实战妙用，代替arr，可以不必要写key

//Fragment写法,不用写key,不用逗号
 
      取消
      保存
    }
>

//数组写法,不写key属性报警告
 footer= [
    取消,
    保存,
 ]

以下载于https://majing.io/posts/10000...
React 16.2最大的变化是新增了fragments特性，fragments语法。

示例：返回一首诗的片段

敬请阅读
面朝大海，春暖花开
从明天起，做一个幸福的人
喂马、劈柴，周游世界
...

React 16之前的版本

在React 16之前的版本，如果想用组件返回一个子元素列表，我们需要使用div或者span标签把元素列表包装起来。

render() {
  return (
    

      敬请阅读
      
面朝大海，春暖花开
      
从明天起，做一个幸福的人
      
喂马、劈柴，周游世界
      
...
    
  );
}

此方法的缺点是需要使用额外的DOM元素包装。

React 16.0

React 16.0，则新增了数组的方式返回子元素列表。

render() {
 return [
  "敬请阅读",
  
面朝大海，春暖花开
,
  
从明天起，做一个幸福的人
,
  
喂马、劈柴，周游世界
,
  
...
 ];
}

此方式的缺点是：

1. 文本需要使用引号括起来，如“敬请阅读”。
2. 子元素之间使用逗号分隔

这和普通的JSX写法有区别。

React 16.2

React 16.2新增了fragments语法来解决上面两种方式的问题。

render() {
  return (
    
      敬请阅读
      
面朝大海，春暖花开
      
从明天起，做一个幸福的人
      
喂马、劈柴，周游世界
      
...
    
  );
}

可以使用空标签<>替换，<>为的语法糖：

render() {
  return (
    <>
      敬请阅读
      
面朝大海，春暖花开
      
从明天起，做一个幸福的人
      
喂马、劈柴，周游世界
      
...
    
  );
}

注意：在渲染时，fragment标签是不会添加到DOM里。

Fragment在React 16.2已添加到React对象里。

const Fragment = React.Fragment;