本人在阅读本书之前,对于React只是通过官方文档的学习对React有一个基本的了解,但是对于React的很多知识面都不了解,因此希望通过这本书更全面熟练地掌握React框架。
这周细致阅读了该书第一章(初入React世界)的前三小节。
1. React简介
- React主要有三个不同于其他框架的特点:
-
专注视图层
React与其他框架最明显的不同是React专注于提供view层解决方案,它并不是一个完整的MVC/MVVM框架,不仅仅如此,它还是一个包含View和Controller的库。对于复杂的应用,可以根据应用场景自行选择业务层框架,并根据需要搭配 Flux、Redux、GraphQL/Relay 来使用。 -
虚拟DOM树
相比较传统的页面开发需要每次更新都重新操作DOM相比,React做出了很大的优化,它把真实 DOM 树转换成 JavaScript 对象树(虚拟DOM),每次更新时,会重新计算虚拟DOM并与上一次的进行比较,只更新变化的部分。而且React的生命周期之一shouldComponentUpdate也是通过只更新变化的部分来减少DOM消耗、优化性能。 -
函数式编程
函数式编程是React的精髓。所谓函数式编程就是构建一个规则以去减少冗余的代码,而这个规则可以被反复的使用。React可以将需要重复构建的UI过程抽象为组件,根据传入参数的不同区渲染不同的页面。
-
专注视图层
2. JSX语法
- 什么是JSX
- React 是通过创建与更新虚拟元素(virtual element)来管理整个 Virtual DOM 的。虚拟元素其实就是真实元素的映射,它的构建和更新都是在内存中完成的不会渲染到真正的DOM中。React创建的虚拟元素可分为:DOM元素和自定义元素。
- JSX就是React用于构建虚拟元素的语法。它将HTML语法直接添加到JavaScript代码中,然后通过Babel的JSX编译器转换为纯JS后给浏览器执行。
- JSX基本语法
- JSX的基本语法分为XML基本语法和元素类型属性两部分:
- XML基本语法
XML语法实际上和写HTML一样,只不过它被包裹在 JavaScript 的方法中
但是和写HTML不同的是,需要注意两点:
1.定义标签时,只允许被一个标签包裹。
2.所有标签一定要闭合,否则编译无法通过。 - 元素类型属性
1.元素类型分为两部分:DOM元素和自定义元素。
2.元素属性最主要分为:
a.boolean属性:如果写了boolean属性值JSX会默认为true,不写就是false
b.展开属性:如果不知道组件需要哪些属性时,可以用扩展运算符...来提高效率。
3. React组件
React组件基本上由组件的构建方式、组件内的属性状态与生命周期方法组成。
- 组件的演变过程
a. 传统的组件都要几个明显的特点:1.简单封装 2.简单的生命周期呈现 3.明显的数据流动。但是当一个项目的逻辑交互较为复杂时,传统的组件化根本不能很好的将结构样式和行为结合,让项目难以维护。
b. React组件基本分为3部分:属性(props)、状态(state)、生命周期。
Ract组件可以传入props,也有自己的state,当传入的属性或自身状态发生改变时,就会执行相应的生命周期方法重新渲染页面。
React组件即遵循了传统的组件的职责,又做出来新的改变和优化——将HTML完全引入JS中。 - 组件的构建方式
组件的构建方式有三种:
a.React.createClass
b.ES6 classes创建类
c.无状态函数(只传入props和context)
4. 个人总结
在阅读了前三节后,个人对于React的部分基本概念有了更全面的认识,在此之前,我其实一直不太清楚React与其他框架比如Vue、Angular,现在我认识到了:
1. React最大的好处就是它的跨平台优势,react-native能让你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。还能同时跨平台开发。
2. React很灵活,它的虚拟DOM的概念很大程度提高了性能优化和资源节约,这一点和Vue相似。而且React的精髓——函数式编程也节省了很多冗余代码的编写,便于测试。