h函数

h(tag[, props, children, className, key, ref])函数的作用是创建虚拟DOM,它的参数说明如下:

  • tag {String | Function} 虚拟DOM的类型,可以是字符串定义的html标签,也可是是组件的构造函数
  • props {Object} 虚拟dom的属性
  • children {String | Number | vNode | Array<String | Number | vNode>} 定义虚拟DOM的子元素
  • className 定义DOM的class属性,因为使用频率非常高,单独拿出来处理,提高效率
  • key 虚拟DOM的key属性,用于区分每一个子元素
  • ref 虚拟DOM的ref属性,用于引用元素或组件实例

对于组件,childrenclassName将作为props属性的一部分,而对于html元素,它们会在编译时单独处理。

例如:

  1. h('div', null, 'test', 'content')
  2. =>
  3. <div class="content">test</div>
  4. h('div', {id: 'test'}, [100, h('span')])
  5. =>
  6. <div id="test">100<span></span><div>
  7. // 假设Component组件的template为 <div>{self.get('chilren')}</div>
  8. h(Component, {children: h('span')})
  9. =>
  10. <div><span></span></div>