新的react包包含了React.createElement，.createClass，.Component，.PropTypes，.children以及其他元素和组件类。这些都是你需要构建组件时助手。
而react-dom包包括ReactDOM.render，.unmountComponentAtNode和.findDOMNode。在 react-dom/server ，有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。
总的来说，两者的区别就是：ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（）来使用。更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，并将其移动到一个更合适的存储库。
可能大家都知道vue有个render函数，但是至于怎么去使用，很多人可能都还不会，所以很多项目里面几乎都没有用过render函数render函数跟template有什么区别？
他们都是类编译器
render函数就是template的下一步，当编辑好template后，vue就会通过render函数去调用createElement，createElement会根据模板来创建一个真实的dom
接下来我就教大家怎么使用render函数：
例如：
建立一个子组件button.vue:
<script>
export default {
// 接收父组件传递的值
props: {
type: {
type: String,
default: 'normal'
},
text: {
type: String,
default: 'normal'
}
},
render(h) {
// h =>createElement
return h('button', {
// v-bind: class，设置class类名
class: {
'btn-success': this.type === 'success',
'btn-error': this.type === 'error'
},
style: {
backgroundColor: 'red'
},
// dom属性
domProps: {
innerText: this.text || '默认文字'
},
// 传事件
on: {
click: function () {
// reject(notification.close)
resolve(notification.close)
}
}
})
}
}
</script>
<style scoped>
.btn-success{
color: green
}
.btn-error{
color: red
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
父组件使用：
<template>
<Button :type="type" :text="text"></Button>
</template>
<script>
// 引入刚才写的组件
import Button from '组件路径'
export default {
// 注册组件
components: {
Button
},
data() {
return {
type: 'success',
text: '确认'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
到此大功告成，至于事件怎么绑定，大家可以自行研究一下，同样的道理
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）