1.0.0 REACT面试回顾

• 什么是模块化？

module：模块化是从代码设计的角度分析，抽离为单个的模块。高内聚，低耦合的公共代码。

• 什么是组件化？

component ：组件化是从UI的角度分析，抽离为单个的组件。例如列表在app内很多页面都有用到，我们便可以抽离为组件。

无论是模块化还是组件化，目的都是为了提高代码复用性，便于后期的维护和开发。

VUE项目使用组件时，使用import导入，那么.vue模版文件中的script中export defult导出的是否是一个组件？

导出的并不是一个组件，.vue模版中template js style组合而成的文件才是一个组件。

不是一个组件为何能使用？

关键点在于webpack中的vue-loader，它能够帮你把单个文件运行自定义的loader链。

1.0.1 虚拟DOM（Document Object Model）

一个网页呈献的过程：

1. 浏览器请求服务器获取html代码
2. 浏览器在内存中获取解析DOM tree
3. 浏览器渲染DOM tree呈献页面

需求

渲染一个通过网络请求返回的表格，点击表头部分的排序按钮，需要对表格进行排序。

通常的方法

1. 获取数组拼接代码
2. 添加到HTML标签中
3. 通过js排序修改数组顺序
4. 拼接好HTML
5. 渲染到页面

这种方法能够实现需求，但是对页面的渲染消耗大，假设数据量很大，只改变其中的两条数据，不需要排序的元素也需要重新渲染到页面。

解决方案：

1. 获取需要渲染元素的DOM tree 和现在需要渲染的DOM tree
2. 进行比较
3. 改变了的DOM记录下来
4. 删除原来的需要改变的元素
5. 渲染现在改变的元素

设想解决方案有了那么按照做就行了，但是浏览器中没有获取DOM tree的api，于是react库便出现了，不需要真实的DOM，模拟出来的DOM依然可以满足需求实现按需更新。于是有了diff算法

1.0.2 Diff 算法

//html
    <h1 id="title" title="h1" data-poit="9">标题</h1>
//对应的DOM tree
    <script>
        const h1 = {
            targetName: 'h1',
            arrts: {
                id: "title",
                title: "h1",
                "data-poit": "9"
                    },
             childrens: [
                "标题"
                       ]
                    }
    </script>

• tree diff
• component diff
• element diff

新旧两棵DOM tree，逐层进行对比，便是 Tree diff 当整棵树都对比完毕，则需要按需更新的组件，必然能够找到。

组件之间的对比，每一层级中的组件进行对比

在进行组件对比的时候，如果类型相同则需要元素级别之间的对比，叫做element diff

以上为react 面试谈话内容