• 1. React简介
• 2. JSX语法
• 3. React组件
• 4. 个人总结

本人在阅读本书之前，对于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基本语法和元素类型属性两部分：
  1. XML基本语法
     XML语法实际上和写HTML一样，只不过它被包裹在 JavaScript 的方法中
     但是和写HTML不同的是，需要注意两点：
     1.定义标签时，只允许被一个标签包裹。
     2.所有标签一定要闭合，否则编译无法通过。
  2. 元素类型属性
     1.元素类型分为两部分：DOM元素和自定义元素。
     2.元素属性最主要分为：
     a.boolean属性：如果写了boolean属性值JSX会默认为true,不写就是false
     b.展开属性:如果不知道组件需要哪些属性时，可以用扩展运算符...来提高效率。

3. React组件

React组件基本上由组件的构建方式、组件内的属性状态与生命周期方法组成。

1. 组件的演变过程
   a. 传统的组件都要几个明显的特点：１.简单封装　２.简单的生命周期呈现　３.明显的数据流动。但是当一个项目的逻辑交互较为复杂时，传统的组件化根本不能很好的将结构样式和行为结合，让项目难以维护。
   b. React组件基本分为3部分：属性（props）、状态(state)、生命周期。
   　　Ract组件可以传入props,也有自己的state,当传入的属性或自身状态发生改变时，就会执行相应的生命周期方法重新渲染页面。
   　　React组件即遵循了传统的组件的职责，又做出来新的改变和优化——将HTML完全引入JS中。
2. 组件的构建方式
   　组件的构建方式有三种：
   　　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的精髓——函数式编程也节省了很多冗余代码的编写，便于测试。