React Vue 中render的异同

SunoAries commented 7 years ago

vue

vue中render是作为字符串模板的替代品，但是好像这个也会被编译，最后通过render函数渲染。其实有render还不错，字符串模板比较简单易懂。
语法和react不同，有一定区别

有一个renderError选项还不错噢

//对应的template 为 <div><span>{{text}}</span></div>
render(h){
return h('div', {}, [   //h是createElement的别名
  h('span', {}, [this.__toString__(this.text)])
])
}


Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
  'h' + this.level,   // tag name 标签名称
  this.$slots.default // 子组件中的阵列
)
}
})

-------------------所以重点是createElement，react是jsx就可以了。但是vue主要靠createElement。
```javascript
// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数，必要参数
  'div',
  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性.可选参数.
  {
    // (详情见下一节)
  },
  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或简单的使用字符串来生成“文本结点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

render: function (createElement) {  
       return createElement('div',  
                Array.apply(null, { length: 20 }).map(function () {     
                              return createElement('p', 'hi')   
               })
 )}

SunoAries commented 7 years ago

react

没有字符串模板啊，只有render函数。

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

SunoAries commented 5 years ago

其实，vue也有用render，jsx，通过vue-class-component

SunoAries commented 5 years ago

vue

vue中render是作为字符串模板的替代品，但是好像这个也会被编译，最后通过render函数渲染。其实有render还不错，字符串模板比较简单易懂。
语法和react不同，有一定区别
有一个renderError选项还不错噢

  //对应的template 为 <div><span>{{text}}</span></div>
  render(h){
    return h('div', {}, [   //h是createElement的别名
      h('span', {}, [this.__toString__(this.text)])
    ])
  }

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  }
})

-------------------所以重点是createElement，react是jsx就可以了。但是vue主要靠createElement。

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数，必要参数
  'div',
  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性.可选参数.
  {
    // (详情见下一节)
  },
  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或简单的使用字符串来生成“文本结点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

render: function (createElement) {  
       return createElement('div',  
                Array.apply(null, { length: 20 }).map(function () {     
                              return createElement('p', 'hi')   
               })
 )}

h函数，也就是createElement，难道不是一个写着非常不顺畅的东西吗，虽然说，可以形成类似于jsx的东西，但是麻烦一万倍。

SunoAries commented 5 years ago

react + jsx 表达能力太强了。虽然没有vue 模板那么多语法糖，但是通过代码的巧妙控制，你几乎可以实现你想要的一切

SunoAries / blog

React Vue 中render的异同 #3

vue

react

vue