关于React中的声明式渲染框架问题.docx

第

关于React中的声明式渲染框架问题

目录1.命令式和声明式1.1命令式1.2声明式1.3两种范式的性能和易维护性2.虚拟DOM的性能如何3.运行时和编译时3.1运行时3.2运行时+编译时3.3编译时4.总结在学习React源码之前，我们先搞清楚框架的范式都有哪些。框架范式主要有两种：命令式和声明式，目前大部份流行框架都采用声明式渲染，为什么都选择声明式渲染呢？对比命令式它有什么优势呢？为了搞清楚这些问题，我们先从动态渲染页面的三种方式：纯JS运算，innerHTML，虚拟DOM，分别比较他们的性能、可维护性和心智负担，来阐明基于虚拟DOM声明式渲染的优势。然后会说到与声明式框架密切相关的运行时和编译时。相信看完你会对React、Vue这一类采用虚拟DOM的声明式框架有自己的理解。

1.命令式和声明式

在对比之前，我们先了解一下什么是声明式，什么是命令式，它们各有什么优缺点。作为框架学习者，了解这两种范式的框架对学习框架思想很有帮助。我们先看看命令式和声明式框架的概念和具体形式。

1.1命令式

什么是命令式？早年间大范围流行的JQuery就是典型的命令式框架，命令式框架最大的特点是关注过程，例如我要做如下DOM操作：

获取id为app的div元素把元素的显示文本设置为helloworld给他绑定点击事件事件内容是弹窗提示ok

用jQuery可以写出如下代码:

$(#app)//1

.text(helloworld)//2

.on(click,function(){//3

alert(ok)//4

})

可以看到自然语言描述能够跟实际写代码一一对应起来，写代码本身就是在描述做事的过程，这很符合日常生活的直觉和逻辑。而且整个过程没有任何其他的性能开销，因此命令式框架的性能一搬都非常不错。

1.2声明式

什么是声明式？与命令式框架不同关注过程不同，声明式框架更关注结果，所见即所得。按照框架的规范，声明出用户想要的结果，具体怎么实现无需关心，都交给框架处理。同样上面的那个例子里面，用React这种声明式的框架可以这样写:

divid=app()=alert(ok)}helloworld/div

在react里面一般都是用JSX描述页面的dom结构。可以看到我们只需提供一个最终的结果，至于具体怎么实现这个结果的过程，我们并不需要关心。换句话说React框架帮我们封装了实现的过程，因此应该能够猜到React框架内部实现一定是命令式的，但是暴露给用户的是更加直观的声明式。

1.3两种范式的性能和易维护性

我们首先抛出一个结论：声明式代码的性能不优于命令式代码的新能。为什么呢？还是拿上面的例子来说，如果要把文本内容改为：react，用命令式代码就很简单，因为用户明确的知道要修改的是什么，直接调用相关api即可：

app.textContent=react

试想一下，有没有其他的实现方式比这个代码性能更好的？答案是没有，因为我们明确的知道是哪些地方发生了变化，直接修改变化的地方就行，因此命令式的代码能做到极致的性能优化。但是声明式的代码目前还做不到这一点，因为它表述的是结果：

//之前

divid=app()=alert(ok)}helloworld/div

//之后

divid=app()=alert(ok)}react/div

对于框架来说，为了实现最好的更新性能，框架需要找到新旧DOM的差异，并且只更新有差异的地方，最终还是用命令式的代码完成这次变更：

app.textContent=react

如果把修改文本的性能消耗为A，找出新旧内容差异的性能损耗为B，那么会有如下公式：

命令式的代码更新性能为：A声明式的代码更新性能为：B+A

可以看出，声明式代码比命令式代码多了找出差异的性能消耗，最理想的情况是查找差异性能的消耗为0，此时命令式代码和声明式代码的性能相同，但是无法超过命令式代码。因为框架本身封装了命令式的代码才实现了面向用户的声明式，这也侧面印证了之前的结论：声明式代码的性能不优于命令式代码的新能。

既然命令式代码性能这么好，又直接，为啥还有类似React，Vue这样的声明是框架呢？原因是声明式代码的可维护性更强。从之前的例子可以看出，采用命令式代码实现的时候，我们需要关注整个实现过程的每一步，包括DOM元素的创建、获取、更新、删除等操作，过程繁琐而且抽象，心智负担高。而声明式代码展示就是最终我们