react（1）

React 是一个用于构建用户界面的 JavaScript 库。

一、 react 和 vue 的对比

1、什么是模块化？
是从代码角度来分析的。把一些可复用的代码，抽离为单个的模块；便于维护和开发。
2、什么是组件化？
是从 UI 界面的角度来进行分析的。把一些可复用的UI元素，抽离为单独的组件；便于项目的维护和开发。
3、组件化的好处。
随着项目规模的增大，组件越来越多，很方便把现有的组件拼接成完整的页面。
4、vue 是如何实现组件化的？
通过 .vue 文件来创建对应的组件。
5、react 如何实现组件化？
react 有组件化的概念，但是并没有像 vue 这样的组件模板文件，react 中，一切都是以 js 来表现的。

二、react 核心概念

1、虚拟DOM

1、DOM 的本质是什么？
js 对象。浏览器中的概念，用 js 对象来表示页面上的元素，并提供了操作 DOM 对象的 API。
2、什么是 react 中的虚拟 DOM？
是框架中的概念。是程序员用 js 对象来模拟页面上的 DOM和 DOM 嵌套。
3、为什么要实现虚拟 DOM？
为了实现页面中 DOM 元素的高效更新。
4、DOM 和虚拟 DOM 的区别？
DOM：浏览器中提供的概念；用 js 对象标识页面上的元素，并提供了操作元素的 API。
虚拟 DOM：是框架中的概念；是开发人员手动用js对象来模拟DOM 元素和嵌套关系。

2、diff算法

1、tree diff
新旧两棵 DOM 树，逐层对比的过程就是 tree diff。
当整棵 DOM 树逐层对比完毕，则所有需要被按需更新的元素，必然能够找到。
2、component diff
在进行 tree diff 的时候，每一层组建级别的对比叫做 component diff。
如果对比前后组件的类型相同，则暂时认为此组件不需要被更新。
如果对比前后组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上。
3、element diff
在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这就是 element diff。