1. react基础
1.1 es6语法
ES 6是JavaScript语言的新一代标准。React的项目一般都是用ES 6语法来写的。
1.let const
let和const是ES 6中新增的两个关键字，用来声明变量。
const声明一个只读的常量，一旦声明，常量的值就不能改变。
2.箭头函数
ES 6允许使用“箭头”（=>）定义函数。
例如：
var f = (a, b) => a + b;
3.模板字符串
模板字符串是增强版的字符串，用反引号（`）标识字符串。
它可以用来定义多行字符串，以及在字符串中嵌入变量，功能很强大。
//多行字符串
'JS is wonderful !
React is wonderful! '
//字符串中嵌入变量
var name = "React";
'Hello, ${name} ! ';
4.解构赋值
ES 6允许按照一定模式从数组和对象中提取值，对变量进行赋值，
这被称为解构。
//数组解构
let [a,b,c] = [1, 2, 3];
//对象解构
let name = 'Lily';
let age = 4;
let person = {name, age};
person // Object {name: "Lily", age: 4}
//对象解构的另一种形式
let person = {name: 'Lily', age: 4};
let {name, age} = person;
name // "Lily"
age //4
//嵌套结构的对象解构
let {person: {name, age}, foo} = {person: {name: 'Lily',
age: 4}, foo: 'foo'};
name //"Lily"
age //4
foo //"foo"
5. rest参数
ES 6引入rest参数（形式为…变量名）用于获取函数的多余参数，以代替arguments对象的使用。rest参数是一个数组，数组中的元素是多余的参数。
function languages(lang, ...types){
console.log(types);
}
languages('JavaScript', 'Java', 'Python'); //["Java",
"Python"]
6. 扩展运算符
扩展运算符是三个点（…），它将一个数组转为用逗号分隔的参数序列，类似于rest参数的逆运算。
function sum(a, b, c){
return a + b + c;
}
let numbers = [1, 2, 3];
sum(...numbers); //6
扩展运算符还常用于合并数组以及与解构赋值结合使用。
//合并数组
let arr1 = ['a'];
let arr2 = ['b', 'c'];
let arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3]; //['a', 'b', 'c', 'd', 'e'];
//与解构赋值结合
let [a, ...rest] = ['a', 'b', 'c'];
rest //['b', 'c']
扩展运算符还可以用于取出参数对象的所有可遍历属性，复制到当
前对象之中。
let bar = {a: 1, b: 2};
let foo = {...bar};
foo //Object {a: 1, b: 2};
foo === bar //false
7. class
ES 6引入了class（类）这个概念，新的class写法让对象原型的写法
更加清晰，也更像传统的面向对象编程语言的写法。
//定义一个类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName(){
return this.name;
}
getAge(){
return this.age;
}
}
//根据类创建对象
let person = new('Lily', 4);
class之间可以通过extends关键字实现继承
class Man extends Person {
constructor(name, age) {
super(name, age);
}
getGender() {
return 'male';
}
}
let man = new Man('Jack', 20);
8. import、export
ES 6实现了自己的模块化标准。
export用于规定模块对外暴露的接口，import用于引入其他模块提供的接口。
//a.js，导出默认接口和普通接口
const foo = () => 'foo';
const bar = () => 'bar';
export default foo; //导出默认接口
export {bar}; //导出普通接口
//b.js(与a.js在同一目录下)，导入a.js中的接口
//注意默认接口和普通接口导入写法的区别
import foo, {bar} from './a';
foo(); //"foo"
bar(); //"bar"
1.2 JSX
JSX 是一种用于描述UI的JavaScript扩展语法，React使用这种语法
描述组件的UI。
React 认为，一个组件应该是具备UI描述和UI数据的完整体，不应该将它们分开处理，于是发明了JSX，作为UI描述和UI数据之间的桥梁。
1.2.1 JSX语法
1 基本语法
JSX的基本语法和XML语法相同，都是使用成对的标签构成一个树
状结构的数据
const element = (
<div>
<h1>Hello, world!</h1>
</div>
)
const element = <h1>Hello, world!</h1>;
2 标签类型
在JSX语法中，使用的标签类型有两种：DOM类型的标签（div、
span等）和React组件类型的标签。
当使用DOM类型的标签时，标签的首字母必须小写；当使用React组件类型的标签时，组件名称的首字母必须大写。React 正是通过首字母的大小写判断渲染的是一个DOM类型的标签还是一个React组件类型的标
签。
// DOM类型标签
const element = <h1>Hello, world!</h1>;
// React组件类型标签
const element = <HelloWorld />;
// 二者可以互相嵌套使用
const element = (
<div>
<HelloWorld />
</div>;
)
3 JavaScript表达式
在JSX中使用JavaScript表达式需要将表达式用大括号“{}”包起来。
表达式在JSX中的使用场景主要有两个：通过表达式给标签属性赋值和通过表达式定义子组件。
// 通过表达式给标签属性赋值
const element = <MyComponent foo={ 1 + 2 } />
// 通过表达式定义子组件(map虽然是函数，但它的返回值是JavaScript表达
式)
const todos = ['item1', 'item2', 'item3'];
const element = (
<ul>
{todos.map(message => <Item key={message} message=
{message} />)}
</ul>
);
注意，JSX中只能使用JavaScript表达式，而不能使用多行JavaScript语句。
// 错误
const element = <MyComponent foo={const val = 1 + 2; return val; } />
// 错误
let complete;
const element = (
<div>
{
if(complete){
return <CompletedList />;
}else{
return null;
}
}
</div>
)
不过，JSX中可以使用三目运算符或逻辑与（&&）运算符代替if语
句的作用。
// 正确
let complete;
const element = (
<div>
{
complete ? <CompletedList /> : null
}
</div>
)
//正确
let complete;
const element = (
<div>
{
complete && <CompletedList />
}
</div>
)
4 标签属性
当JSX 标签是DOM类型的标签时，对应DOM标签支持的属性JSX也支持，例如id、class、style、onclick等。但是，部分属性的名称会有所改变，主要的变化有：class 要写成className，事件属性名采用驼峰格式，例如onclick 要写成 onClick。原因是，class是JavaScript的关键字，所以改成className；React对DOM标签支持的事件重新做了封装，
封装时采用了更常用的驼峰命名法命名事件。
<div id='content' className='foo' onClick={() =>
{console.log('Hello, React')}} />
5 注释
JSX中的注释需要用大括号“{}”将/**/包裹起来。
const element = (
<div>
{/* 这里是一个注释 */}
<span>React</span>
</div>
)
6 注释
JSX语法对使用React来说并不是必需的，实际上，JSX语法只是
React.createElement (component, props, …children)的语法糖，所有的JSX
语法最终都会被转换成对这个方法的调用。
//JSX语法
const element = <div className='foo'>Hello, React</div>
//转换后
const element = React.createElement('div', {className:
'foo'}, 'Hello, React')
1.3 组件
1 组件定义
定义一个组件有两种方式，使用ES 6 class（类组件）和使用函数（函数组件）。
使用class定义组件需要满足两个条件：
（1）class继承自React.Component。
（2）class内部必须定义render方法，render方法返回代表该组件UI
的React元素。
假设定义了一个PostList组件。如何使组件显示到页面上呢？
需要使用ReactDOM.render() 完成这一个工作
// index.js
import React from "react";
import ReactDOM from "react-dom";
import PostList from "./PostList";
ReactDOM.render(<PostList />,
document.getElementById("root"));
注意，使用ReactDOM.render() 需要先导入react-dom库，这个库会完成组件所代表的虚拟DOM节点到浏览器的DOM节点的转换。
2 组件的props
组件的props用于把父组件中的数据或方法传递给子组件，供子组件使用。
props是一个简单结构的对象，它包含的属性正是由组件作为JSX标签使用时的属性组成。
<User name='React' age='4' address='America' >
此时User组件的props结构如下：
props = {
name: 'React',
age: '4',
address: 'America'
}
3 组件的state
组件的state是组件内部的状态，state的变化最终将反映到组件UI的变化上。
我们在组件的构造方法constructor中通过this.state定义组件的初始状态，并通过调用this.setState方法改变组件状态（也是改变组件状态的唯一方式），进而组件UI也会随之重新渲染。
// 点赞的例子
import React, { Component } from "react";
class PostItem extends Component {
constructor(props) {
super(props);
this.state = {
vote: 0
};
}
// 处理点赞逻辑
handleClick() {
let vote = this.state.vote;
vote++;
this.setState({
vote: vote
});
}
render() {
const { title, author, date } = this.props;
return (
<li>
<div>
{title}
</div>
<div>
创建人：<span>{author}</span>
</div>
<div>
创建时间：<span>{date}</span>
</div>
<div>
<button
onClick={() => {
this.handleClick();
}}
>
点赞
</button>
<span>
{this.state.vote}
</span>
</div>
</li>
);
}
}
export default PostItem;
注意
（1）在组件的构造方法constructor内，首先要调用super(props)，这一步实际上是调用了React.Component这个class的constructor方法，用来完成React组件的初始化工作。
（2）在constructor中，通过this.state定义了组件的状态。
（3）在render方法中，我们为标签定义了处理点击事件的响应函数，在响应函数内部会调用this.setState更新组件的点赞数。
组件的props和state都会直接影响组件的UI。事实上，React组件可以看作一个函数，函数的输入是props和state，函数的输出是组件的UI。
UI = Component(props,state)
React组件正是由props和state两种类型的数据驱动渲染出组件UI。props是组件对外的接口，组件通过props接收外部传入的数据（包括方法）；state是组件对内的接口，组件内部状态的变化通过state来反映。另外，props是只读的，你不能在组件内部修改props；state是可变的，组件状态的变化通过修改state来实现。
4 有状态组件和无状态组件
如果一个组件的内部状态是不变的，当然就用不到state，这样的组件称之为无状态组件。
一个组件的内部状态会发生变化，就需要使用state来保存变化，这样的组件称之为有状态组件。
定义无状态组件除了使用ES 6 class的方式外，还可以使用函数定义，也就是我们在本节开始时所说的函数组件。
一个函数组件接收props作为参数，返回代表这个组件UI的React元素结构。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
React应用组件设计的一般思路是，通过定义少数的有状态组件管理整个应用的状态变化，并且将状态通过props传递给其余的无状态组件，由无状态组件完成页面绝大部分UI的渲染工作。总之，有状态组件主要关注处理状态变化的业务逻辑，无状态组件主要关注组件UI的渲染。