React踩坑记（一）

在学了Vue.js的基础下学习React，blog主要记录学习过程中的启发，两个框架的区别，以及一些不熟悉的概念。

---

概念区

模块化：从代码的角度来进行分析。把一些可复用的代码抽离为单个的模块，便于项目的维护和开发。

组件化：从UI界面的角度来进行分析。把一些可复用的UI元素（轮播图）抽离为单独的组件，便于项目的维护和开发。

一个网页呈现的过程：
1.浏览器请求服务器获取页面HTML代码
2.浏览器在内存中解析DOM结构，并渲染出一颗DOM树
3.浏览器把DOM树呈现在也页面上

DOM和虚拟DOM的区别

• DOM：浏览器中的概念；用JS对象表示页面上的元素，提供了操作元素的API

• 虚拟DOM：框架中的概念；框架的开发者手动用JS对象来模拟DOM元素和嵌套关系

  本质：用JS对象模拟DOM元素和嵌套关系
  目的：实现页面元素的高效更新（按需更新，对比新旧dom树？）

为什么需要虚拟DOM？
操作原生dom的代价是昂贵的，频繁的操作dom会出现页面卡顿，影响用户体验。比如：在一次操作中，我需要更新10个节点。理想的状态是一次性构建完DOM树，再执行后续操作。但实际中，每更新一个节点，浏览器并不知道后面还有9个节点需要更新，因此会马上执行页面渲染的流程，一共执行10次。

虚拟dom的解决：将10次更新的diff内容保存到本地的一个对象中，最终一次性将这个js对象attach到dom树上，再通知浏览器绘制节点。

Diff算法
作用：计算出虚拟dom中被改变的部分，针对该部分对原生dom进行操作，不需要重新渲染页面。

三大策略：
tree diff：新旧dom树逐层对比
component diff：进行tree diff时，组件级别的对比
element diff：进行component diff时，元素级别的对比

1 .两个相同的组件产生类似的dom结构，不同的组件产生不同的dom结构
2 .同一层级的一组节点，可以通过唯一的id进行区分
3 .当一层有很多相同的节点的时候，也就是列表节点时，diff算法的更新过程默认情况是遵循以上原则
4 .如果数据的顺序被改变，Vue将不会移动DOM元素在匹配数据项的顺序，而是”就地更新“的策略。

key值的作用
在多个同类型的节点中（比如一个列表），添加一个新的节点时，diff算法会逐个比对原列表和新列表的节点，从新增加的节点开始逐个更新。

使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

key的作用主要是为了高效的更新虚拟DOM。

---

对比区

Vue实现组件化：通过.vue文件，创建对应的组件

• template-结构 script-行为 style-样式

React实现组件化：React中有组件化的概念，没有类似.vue这样的模板文件。React中，一切都以js来表现。