mvc框架中数据的变化驱动视图的变化,当数据改变时,比如num由1变为10:
// react
this.setState({num: 10})
// vue
this.data.num = 10
复制代码
只需执行简单的代码,就是引起页面视图的变化。两个框架之间是如何做的的呢?
1. React数据驱动视图
要想了解数据驱动视图的过程,首先要了解react的渲染过程:
1. 编写:我们编写的组件都是继承自React.Component(函数式组件除外),组件内部的视图模板文件则
采用jsx的语法进行编写
2. 编译:将我们编写的组件实例编译成一个个的虚拟dom节点(本质就是json对象)
3. 挂载:将虚拟dom节点编译成真实dom,并挂载到界面
复制代码
这只是渲染过程的非常简化的说法,实际每个过程细节都很复杂,在此先不做细节讨论。
而数据驱动视图 this.setState({num:10}) 并非直接导致真实dom的改变,它首先映射到虚拟的dom节点,虚拟dom节点的挂载导致页面视图的变化。
从流程上看,似乎多此一举,直接操作dom节点改变数据不是更直接,为什么要绕弯操作虚拟dom?首先dom操作的会导致浏览器的重绘重排,性能开销比较大。当我们在一个方法中出现了多次数据变化时,每次都要操作dom很浪费性能。有了虚拟dom后,把多次的数据变化先映射到虚拟dom中,最后进行一次挂载,相当于只操作了一次真实dom,有效的降低了性能开销。
今天的主角ÿ