React 的核心概念

1.react简介

• react起源于Facebook的内部项目，因为改公司对市场上所有javaScript MVC框架，都不满意，就决定自己写一套，用来架设instagram(照片交友)的网站，做出来之后发现这套东西很好用就在2013年5月开源了
• 由于React的设计思想及其独特，属于革命性创新，性能出众，代码逻辑却非常简单，所以，越来越多的人开始关注和使用。
• 清楚两个概念
  • library(库)
  • Framework(框架)

2.组件化

1. 什么时模块化:
   是从代码的角度来进行分析的，把一些可服用的代码，抽离为单个的模块，便于项目的维护和开发
2. 什么时组件化:
   是从UI界面的角度来进行分析的，把一些可服用的UI元素，抽离为掸族的组件，便于项目有的维护和开发
3. 组件化的好处:
   随着项目规模的增大，手里的组件越来越多，很方便把现有的组件，拼接为一个完整的页面
4. react如何实现组件化:
   react中，一切都是以JS来表现的

3. 虚拟DOM

• DOM的本质是什么:浏览器的概念，使用JS对象来表示页面上的元素，饼提供了操作DOM对象的API

• 什么是React中的虚拟DOM:是框架中的概念，是程序员用JS对象来模拟页面上的DOM和DOM嵌套

• 为什么要实现虚拟DOM(虚拟DOM的目的):为了实现页面中DOM元素的高效更新

• DOM和虚拟DOM的区别:

  • DOM: 浏览器中，提供的概念，用JS对象，标识页面上的元素，并提供了操作元素的API
  • 虚拟DOM: 是框架的概念; 而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；
    • 本质：用JS对象，来模拟DOM元素和嵌套关系
    • 目的：就是为了实现页面元素的高效更新

Diff算法

• tree diff: 新旧两颗DOM树，逐层对比的过程，就是Tree Diff;当整顿DOM逐层对比完毕，则所有需要背按需更新的元素，必然能够找到
• component diff : 在进行Tree Diff的时候，每一层中，组建级别的对比，叫做Commponent Diff;
  • 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新
  • 如果对比前后，组件类型不同，则需要一处就组建，创建新组件，并追加到界面上
• element diff : 在进行组建对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做Elemnt Diff;