一、React简介

React 是一个用于构建用户界面的 JavaScript 库。把用户界面抽象成一个个的组件，通过引入jsx语法，复用组件更容易，同时保证组件结构清晰。

React 特点

1. 专注于视图层
   React不是完成的MVC/MVVM框架，很多人认为 React 是 MVC 中的 V（视图）

2. Vitual DOM
   React把真实的DOM树转换成js对象树，也就是Vitual DOM，通过对DOM的模拟，最大限度地减少与DOM的交互，因此更加高效。
   
   每次数据更新后，重新计算Vitual DOM，并和上一次生成的Vitual DOM做对比，对发生变化的部分批量更新。
   React也提供了直观的shouldComponentUpdate生命周期回调，来减少数据变化后不必要的Vitual DOM对比过程。

3. 函数编程
   React采用声明范式，可以轻松描述应用。充分利用函数式方法减少冗余代码，此外，本身就是简单函数，易于测试。函数式编程才是React精髓。

4. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单

5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6. 灵活 −React可以与已知的库或框架很好地配合。

二、JSX语法

React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

使用JSX

1. XML语法
   JSX是类XML语法的ECMAScript扩展，使用XML好处是标签可以任意嵌套，可以像写HTML一样清晰的看到DOM树状结构及其属性。

const list = () => {<div><Title>这是标题</Title><ul><li>列表item</li><li>列表item</li><li>列表item</li></ul></div>
}

上面构造了一个list组件，注意事项：

• 定义标签时，只允许被一个标签包裹，例如：

const list = () => {<Title>这是标题</Title><ul><li>列表item</li><li>列表item</li><li>列表item</li></ul>
}

这样就会报错了，原因是没有最外层包裹，无法转译成功。

• 标签一定要闭合
  当然，JSX报错机制很强大，如果有拼写错误会直接打印出来。

2. 元素类型
   在构建页面中有两种元素：DOM元素和组件元素，在JSX中会有对应，对应规则是标签的首字母是否是小写字母，小写首字母对应DOM元素，大写首字母对应组件元素。

3. 注释
   注释需要写在花括号中，实例如下：

const list = () => {<div><Title>这是标题</Title>{/*注释...*/}<ul><li>列表item</li><li>列表item</li><li>列表item</li></ul></div>
}

4. 元素属性
   JSX语法中DOM元素属性有两个例外，class和for

• class属性改为className
• fro属性改为html-for

三、React组件

React组件就是组件元素，组件元素被描绘成纯粹的JSON对象，意味着可以使用方法或类来进行构建。
React组件由三部分构成–属性（props）、状态（state）以及生命周期方法。如下图：

React组件构建方法

1、 React.createClass

用React.createClass方法构建组件是React最传统也是兼容性最好的方法。

const Btn = React.createClass({getDefaultProps() {return {color: 'blue',text: 'confirm'}}render() {const {color, text} = this.propsreturn ({<button className={`btn btn-&{color}`}><em>{text}</em></button>})}
})

2、 ES6 classes

class Welcome extends React.Component {render() {return <h1>Hello World!</h1>;}
}

3、无状态函数

无状态函数构建的组件叫无状态组件，这种方法是0.14版本之后新增的，官方颇为推崇。

function HelloMessage(props) {return <h1>Hello World!</h1>;
}

无状态组件没有state，也没有生命周期方法。
在适当的情况下，我们都应该且必须使用无状态组件，它创建时始终保持一个实例，避免了不必要的检查和内存分配，做到了内部优化。

四、React数据流

在React中，数据是自顶向下单向流动的，即从父组件到子组件。
state和props是React组件中最重要的概念。如果顶层组件初始化props，那么React会向下遍历整颗组件树，重新尝试渲染所有相关的子组件。而state只关心每个组件内部状态，这些状态只能在组件内改变。把组件看成一个函数，那么props作为参数，内部state作为内部参数，返回一个Vitual DOM的实现。

1、state

• React中state用于管理组件内部状态

class Clock extends React.Component {constructor(props) {super(props);this.state = {date: new Date()};}componentDidMount() {this.timerID = setInterval(() => this.tick(),1000);}componentWillUnmount() {clearInterval(this.timerID);}tick() {this.setState({date: new Date()});}render() {return (<div><h1>Hello, world!</h1><h2>现在是 {this.state.date.toLocaleTimeString()}.</h2></div>);}
}

• setState是一个异步方法，一个生命周期内所有的setState方法会合并操作。
• 我们并不推荐滥用state，过多的状态会让数据流混乱，程序变得难以维护。

2、props

React是单向数据流，主要的流通管道就是props。
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

function HelloMessage(props) {return <h1>Hello {props.name}!</h1>;
}const element = <HelloMessage name="Runoob"/>;