学习react的第一天

react学习

第一天

简介

Facebook的内部项目

两个概念

• library（库）：小而巧，方便库之间的切换，代码几乎可以不改变
• framework（框架）：大而全；有一整套的解决方案，切换框架不方便

react与vue对比

组件化方面

1. 什么是模块化：从代码的角度进行分析的；将可复用的代码抽离为单个模块；便于项目开发
2. 什么是组件化：从ui界面角度进行分析；将可复用的ui元素抽离为单独组件；便于项目的维护和开发
3. 组件化的好处：随着项目规模增大，组件越多；
4. Vue是如何实现组件化的：通过.vue文件，创建对应组件；
   • template 结构
   • script 行为
   • style 样式
5. React如何实现组件化：React中有组件化的概念，但是并没有类似vue的模版文件；在react中，一切都是以js来创建的，js要合格；es6和es7（async和await）要会用

React中几个核心概念

虚拟DOM

1. DOM的本质是什么：浏览器里的概念；用js对象表示页面上的元素，并提供操作DOM对象的API；
2. 什么是react中的虚拟DOM：是框架里的概念，用js对象模拟页面上的DOM和DOM嵌套
3. 为什么要实现虚拟DOM（虚拟DOM的目的）：为了实现页面上DOM元素的高效更新。
4. DOM和虚拟DOM的区别：
   • DOM：浏览器中提供的概念，用js对象表示页面上的元素
   • 虚拟DOM：用js对象 手动模拟页面上新旧DOM树
     本质：js对象
     目的：为了实现页面上DOM元素高效更新

Diff算法

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