《深入React技术栈》个人总结（打卡一）

虽说已经在用React写了些项目，起初刚开始的时候并不喜欢react框架（之前是用vue的），到了后面才发现React的好处，深深陷进去了，所以买了本书《深入React技术栈》，细细解读这款框架的魅力

今天阅读了第一章节两小节

1.1.1 React的简介

react与angular等框架不同，并不是完整的MVC/MVVM框架。它更专注于view层的解决方案，也是一个包括View和Controller的库。对于复杂的应用，可以根据应用的场景自行选择业务层的框架，并需要搭配Flux,Redux,GraphQL/Relay来使用。

1.1.2Virtual DOM

React把真实的DOM树转换成javascript对象树，也就是Virtual DOM（虚拟DOM），每次数据更新后，重新计算Virtual DOM，并和上一次生成的Virtual DOM做对比，对发生变化的部分做批量更新。React也提供了直观的shouldComponentUpdate生命周期回调，来减少数据改变之后的不必要的Virtual DOM对比的过程，以保证性能。，它最大的好处还在于方便和其他平台的集成，如react-native是基于Virtual DOM的原生控件，因为React组件可以映射为对应的原生控件。

1.1.3函数式编程

React把过去不断重复构建UI的过程抽象成组件，且在给定参数的情况下约定渲染对应的UI界面。React能充分利用很多函数式的方法去减少冗长的代码。函数式编程是React的精髓。

1.2 JSX语法

React为了方便View层组件化，承载了构建HTML结构化页面的职责。从这点看，React与其它的javascript模版语言有着许多异曲同工之处，但是不同之处在于React是通过创建与更新虚拟元素（Virtual  element）来管理整个Virtual DOM的。

其中虚拟元素可以理解为真实元素的对应，它的构建与更新都是在内存中完成的，并不会真正的渲染到DOM中去。React中创建的虚拟元素可以分为DOM元素以及组件元素，分别对应着原生的DOM元素与自定义元素。

DOM元素包括了元素的类型和属性。如果转换成JSON对象，那么依然包括元素的类型以及属性。

JSX将HTML语法直接加入到javascript代码中，在通过编译器转换到纯javascript后由浏览器执行。

1.2.2基本语法

包括两大块

一：XML基本语法

1.定义标签时，只允许被一个标签包裹

2.标签一定要闭合

二：元素类型

1.DOM元素

2.组件元素

注意：元素是由标签，类型以及属性所构成