render函數初體驗

話很少說，直接上一個簡單的demo

<script>
   export default {
       name : "demoJsx",
       data () {
           return {
               dataList : [
                   {
                       text : "one",
                       id : 1
                   },
                   {
                       text : "two",
                       id : 2
                   },
                    {
                       text : "three",
                       id : 3
                   }
               ],
               demoname : "jsxtest"
           }
       },
       methods : {
           renderListItem(item) {
               const { text , id } = item
               return (
                   <li>個人id是{id}，我叫{text}</li>
               )
           }
       },
       render (h) {
            const { dataList , renderListItem , demoname } = this
            return (
                <ul class={demoname}>
                  {
                      dataList.map( item => {
                          return renderListItem(item)
                      })
                  }
                </ul>
            )
       }
   }
</script>

注：以前一直沒有真正實踐過render函數，其實真正寫出來發現也不是很難，寫render函數主要是爲了不冗餘的重複代碼，讓代碼看起來更加簡潔，更易擴展