想一想：如果要循環輸出h1-h6有沒有捷徑可走？一般情況下循環輸出的都是相同的標簽元素。

1.template

我們先來看看循環輸出相同標簽的寫法：
利用v-for

<li v-for="good in goodsList">
...
</li>

如果要循環輸出h1-h6，你只能這樣寫

<h1>h1</h1>
<h2>h2</h2>
..
<h6>h6</h6>

這個時候jsx的優勢就出來了。

2. jsx

(1)直接輸出一組HTML標簽數組
循環輸出相同標簽的寫法

  render(h){
    var eles=[];
    for(var i=0;i<6;i++){
      eles.push(<li id={i+'item'}>this is {i+1} item</li>);
    }
    return(
       <div class="hello">
         {eles}
       </div>
      )    
  }

劃重點

數組中的元素必須是dom標簽元素才能輸出dom

循環輸出h1-h6
你可以把全部標簽寫一遍，像下面這樣。

var hs=[
<h1>h1</h1>,
<h2>h2</h2>,
...
<h6>h6</h6>
]

這樣的話還不如直接寫標簽。其實createElement()函數，利用這個函數創建并返回一個新的給定類型的元素。
渲染函數 & JSX

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個 HTML 標簽字符串，組件選項對象，或者
  // 解析上述任何一種的一個 async 異步函數，必要參數。
  'div',

  // {Object}
  // 一個包含模板相關屬性的數據對象
  // 這樣，您可以在 template 中使用這些屬性。可選參數。
  {
    // (詳情見下一節)
  },

  // {String | Array}
  // 子節點 (VNodes)，由 `createElement()` 構建而成，
  // 或使用字符串來生成“文本節點”。可選參數。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

這個函數的第一個參數type就是一個標簽名字字符串，我們可以很靈活創建我們需要的元素。
循環輸出h1-h6。

  render(h){
    var eles=[];
    for(var i=0;i<6;i++){
      var ele=h(
      'h'+(i+1),
      { 
      },
      [
        'h'+(i+1)
      ]);
      eles.push(ele);
    }
    return(
       <div class="hello">
         {eles}
       </div>
      )    
  }

(2)利用數組的map方法

  render(h){
    var eles=[];
    for(var i=0;i<6;i++){
      eles.push(i);
    }
    return(
       <div class="hello">
       {
         eles.map(function(ele,index){
           return(
            <li id={ele+'item'}>this is {ele+1} item</li>
          )})
        }
       </div>
      )    
  }

推薦閱讀：
React中元素與組件的區別