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函数主要是为了避免冗余的重复代码，让代码看起来更加简洁，更易扩展