Render函数

1、首先要说一下虚拟DOM,下面一张图说明下:

普通的dom是我们创建的div等节点,虚拟dom是是我们creatElement,然后对属性之类的进行赋值。

2、普通组建在该场景下的问题

  • 代码冗长
  • templete中大部分代码是相同的
  • 外层必须包含一个无用的div

使用render函数重构(重点

  createElement的用法(h)

  • 第一个参数必选,可以是html标签,也可以是一个组建或函数
  • 第二个可选咱叔,数据对象
  • 第三个是字节点
createElement(
'div',[
     createElement('h2','hello world'),//子结点
     createElement(myComponent , {
      props:{
        someProp: 'foo'
    }
  })  ,'bar'
])        

普通组建于Render的区别:

普通组建:

render函数:

 所有的组建树种,如果VNode是组建没货含有组建的slot,那么VNodde必须唯一。

 个人理解不是很清楚:直接上文档

猜你喜欢

转载自www.cnblogs.com/JeneryYang/p/9091955.html