《深入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.组件元素

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

猜你喜欢

转载自blog.csdn.net/twinkle_J/article/details/84799277