* Reat基础知识了解
ES6 是JavaScript语言的新一代标准，加入了很多新的功能和语法。React的项目一般都是用ES 6语法来写的，这也是Facebook官方推荐的方式。为保证本书知识系统的完整性，本节我们会对开发React应用经常用到的ES 6语法做简要介绍。
* 1、let、const
let和const是ES 6中新增的两个关键字，用来声明变量，let和const都是块级作用域。let声明的变量只在let命令所在的代码块內 有效。const声明一个只读的常量，一旦声明，常量的值就不能改变。
* 2、箭头函数
ES 6允许使用"肩头"（=>）定义函数。这种方式创建的函数不需要function关键字，并且还可以省略return关键字。同时，箭头函数的this指向函数定义时所在的上下文对象，而不是函数执行时的上下文对象。
如果箭头函数的参数多于1个或者不需要参数，就需要使用一个圆括号代表参数部分。
如果函数体内包含的语句多于一条，就需要使用大括号将函数体括起来，使用resturn语句返回。
* 3. 模板字符串
模板字符串是增强版的字符串，用反引号（`）标识字符串。除了可以当作普通字符串使用外，它还可以用来定义多行字符串，以及在字符串中嵌入变量，功能很强大。例如：
* 4、解构赋值
* 5、rest参数
ES 6引入rest参数（形式为...变量名）用于获取函数的多余参数，以代替arguments对象的使用。rest参数是一个数组，数组中的元素是多余的参数。
* 6、扩展运算符
* 7、class
ES 6引入了class(类)这个概念，新的class写法让对象原型的写法更加清晰，也更像传统的面向对象变成语言的写法。
* 8、import、export
ES 6实现了自己的模块化标准， ES 6模块功能主要由两个关键字构成：export和import。export用于规定模块对外暴露接口，import用于引入其他模块提供的接口。例如：
* JSX
JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。
长期以来，UI和数据分离一直是前段领域的一个重要关注点。为了解决这个问题，前端领域发明了模板，将UI的定义放入模板文件，将数据的逻辑维护在JS代码中。然后通过模板引擎，根据数据和模板文件渲染出最终的HTML文件或代码片段。大部分前端框架都实现了自己的模板，要使用这些模板，必须学习它们各自的模板语法，而且对于复杂的UI，模板语法也很难对其进行清晰的描述。
React致力于通过组件的概念将页面进行拆分并实现组建复用。React认为，一个组件应该是具备UI描述和UI数据的完整体，不应该将他们分开处理，于是发明了JSX，作为UI描述和UI数据之间的桥梁。这样，在组件内部可以使用类似HTML的标签描述组件的UI，让UI结构直观清晰，同时因为JSX本质上仍然是JavaScript，所以可以使用更多的JS语法，构建更加复杂的UI结构。
* 1、JSX语法
在JSX语法中，使用的标签类型有两种：DOM类型的标签（div、span等）和React组件类型的标签。当使用DOM类型的标签时，标签的首字母必须小写；当使用React组件类型的标签时，组件名称的首字母必须大写。React正式通过首字母的大小写判断渲染的是一个DOM类型的标签还是一个React组件类型的标签。
DOM结构(Document Object Model，文档对象模型)
JavaScript中的map函数：map函数是JavaScript中一个非常有用的高阶函数，它允许你对数组中的每个元素执行一个函数，并返回一个新数组，这个新数组是由原数组中每个元素调用函数后的返回值组成的。这是一个不会改变原始数组的纯函数，因此可以在不影响原始数据的情况下创建信的数据集。
标签属性：当JSX标签是DOM类型的标签时，对应DOM标签支持的属性。但部分属性的名称会有所改变，主要的变化有：class要写成className, 事件属性名采用驼峰格式，例如onclick要写成onClick。原因是，class是JavaScript的关键字，所以改成className; React对DOM标签支持的事件重新做了封装，封装时采用了更常用的驼峰命名法命名事件。
* 组件
* 1、组件的定义
组件是React的核心概念，是React应用程序的基石。组件将应用的UI拆分成独立的、可复用的模块，React应用程序正是由一个一个组建搭建而成的。
2、组件的props
3、组件的state
组件的state是组件内部的状态，state的变化最终将反映到组件UI的变化上。我们在组建的构造方法constructor中通过this.state定义组件的初始状态，并通过调用this.setState方法改变组建状态（也是改变组件状态的唯一方式），进而组件UI也会随之重新渲染。
React组件正是由props和state两种类型的数据驱动渲染出组件UI。props是组件对外的接口，组件通过props接收外部传入的数据（包括方法）；state是组件对内的接口，组件内部状态的变化通过state来反映。另外，props是只读的，不能在组件内部修改props；state是可变的，组建状态的变化通过修改state来实现。
4、有状态组件和无状态组件
如果一个组件的内部状态是不变的，这样的组件称之为无状态组件。反之，一个组件的内部状态会发生变化，就需要使用state来保存变化，这样的组件称之为有状态组件。
定义无状态组件除了使用ES 6 class的方式外，还可以使用函数定义，也就是函数组件。在使用无状态组件时，应该尽量将其定义成函数组件。
在开发React应用时，一定要先认真思考哪些组件应该设计成有状态组件，哪些组件应该设计成无状态组件。并且，应该尽可能多地使用无状态组件，无状态组件不用关心状态的变化，只聚焦于UI的展示，因而更容易被复用。React应用组件设计的一般思路是，通过定义少数的有状态组件管理整个应用的状态变化，并且将状态通过props传递给其余的无状态组件，由无状态组件完成页面绝大部分UI的渲染工作。总之，有状态组件主要关注处理状态变化的业务逻辑，无状态组件主要关注组件UI的渲染。
4、HTML表单和输入
HTML表单用于收集用户的输入信息。
HTML表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到Web服务器。
HTML表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
div、p、span属于"普通HTML元素/内容标签"，不是表单控件，也不收集用户输入，主要用来承载和排版内容。
"渲染（Render）"：把代码变成用户能看到的真实页面的过程。
第4章
* 4.1 组件state
* 4.1.1 设计合适的state
组件state必须能代表一个组件UI呈现的完整状态，即组件的任何UI改变都可以从state的变化中反映出来；同时，state还必须代表一个组件UI呈现的最小状态集，即state中的所有状态都用于反映组件UI的变化，没有任何多余的状态，也不应该存在通过其他状态计算而来的中间状态。
组件中用到的一个变量是不是应该作为state可以通过下面的4条依据进行判断：
（1）这个变量是否通过props从父组件中获取？如果是，那么它不是一个状态。
（2）这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。
（3）这个变量是否可以通过其他状态（state）或者属性（props）计算得到？如果是，那么它不是一个状态。
（4）这个 变量是否在组件的render方法中使用？如果不是，那么它不是一个状态，这种情况下，这个变量更适合定义为组件的一个普通属性。
* 4.1.2 正确修改state
state可以通过this.state.{属性}的方式直接获取，但当修改state时，往往有很多陷阱需要注意。
- 不能直接修改state
直接修改state，组件并不会重新触发render。正确的修改方式是使用setState():
- state的更新是异步的
调用setState时，组件的state并不会立即改变，setState只是把要修改的状态放入一个队列中，Reat会优化真正的执行十几，并且出于性能原因，可能会将多次setState的状态修改合并成一次状态修改。
* 4.1.3 state与不可变对象
1、状态的类型是不可变类型（数字、字符串、布尔值、null、undefined）
2、状态的类型是数组
3、状态的类型是普通对象（不包含字符串、数组）
（1）使用ES6的Object.assgin方法：
（2）使用对象扩展语法（object spread properties）
创建新的状态对象的关键是，避免使用会直接修改原对象的方法，而是使用可以返回一个新对象的方法。
* 4.2 组件与服务器通信
组件向服务器提交数据一定是由组件UI的某一事件触发的，比如提交了一个表单、点击了一个元素等，所以只要在监听相应事件的回调函数中执行想服务器提交数据的逻辑即可，一般不会有疑问。但组件从服务器上获取数据，情况就要复杂得多。
* 4.3 组件通信
一个React应用是由许多个组件像搭积木一样搭建而成的，只要应用不是完全由展示组件组成的，组件之间就难免要进行通信。
4.3.1 父子组件通信
4.3.2 兄弟组件通信
4.3.3 Context
React提供了一个context上下文，让任意层级的子组件都可以获取父组件中的状态和方法。创建context的方式是：在提供context的组件内新增一个getChildContext方法，返回context方法，然后在组件的childContextTypes属性上定义context对象的属性的类型信息。
* 4.4 特殊的ref
ref不仅可以用来获取表单元素，还可以用来获取其他任意DOM元素，甚至可以用来获取React组件实例。在一些场景下，ref的使用可以带来便利，例如控制元素的焦点、文本的选择或者和第三方操作DOM的库集成。但绝大多数场景下，应该避免使用ref，因为它破坏了React中以props为数据传递介质的典型数据流。
* 第5章 虚拟DOM和性能优化
React之所以执行效率高，一个很重要的原因是它的虚拟DOM机制。React应用常用的性能优化方法也大都与虚拟DOM机制相关。
* 5.1 虚拟DOM
虚拟DOM并非React所独有的，它是一个独立的技术，只不过React用了这项技术来提高自身性能。有了虚拟DOM这一层，当我们需要操作DOM时，就可以操作虚拟DOM，而不操作真实DOM，虚拟DOM是普通的JavaScript对象，访问JavaScript对象当然比访问真实DOM要快得多。到这里，大家可以发现，虚拟DOM并不是什么神奇的东西，它只是用来描述真实DOM的JavaScript对象而已。