摘要：上面代码中，通过为组件指定事件的回调函数，确保了只有等到真实发生事件之后，才会读取属性。七表单代码九要点文本输入框的值，不能用读取，而要定义一个事件的回调函数，通过读取用户输入的值。

JSX即JavaScript XML,一种在React组件内部构建标签的类XML语法。
在不使用JSX的情况下，React程序中创建DOM是这样的：

//v0.11
React.DOM.h1({className: "title"}, "Title");
//v0.12
React.createElement("h1", {className: "title"}, "Title");

如果使用JSX的方式创建节点为：

Title

JSX的特征：

JSX是一种句法变换，每一个JSX节点都对应着一个JavaScript函数

JSX即不提供也不需要运行时库

JSX并没有改变或者添加JavaScript的语义，它只是简单的函数调用。

要点一：在整个Html文件中，只有定义了一个id为example的div标签，当程序运行时，JavaScript代码执行，
React会创建新的DOM节点，也就是

Hello,react!

要点二：

要点：通过在JavaScript中定义变量，可嵌入JSX中使用动态变量，使用的语法为：

要点：可以通过传入节点数组的方式，直接把数组给予新的节点，

React的组件化模式是最大的亮点，组件中使用props或者state，当这两个变量改变时，相应的DOM表现也会有所改变，这主要原因是一个
组件是一个状态机，对于特定的输入，他总会返回一致的输出。

要点一： 构造一个组件的语法使用ES6的标准进行，通过继承React.Component,使用render() {...}进行渲染对应的标签和变量输出组件

要点二： 命名新构造的组件的第一个字母需要大写！！！

要点三： 使用构造好的组件，通过使用标签，其中name是传递进去的参数，在内部用this.props.name进行
调用变量

1.Mounting:已插入真实 DOM

2.Updating:正在被重新渲染

3.Unmounting:已移出真实 DOM

1.componentWillMount():改方法在完成首次渲染之前被调用。是在render方法调用前可以修改组件state的最后一次机会

2.componentDidMount():当render方法成功调用后，且DOM已经被渲染，可以在componentDidMount内部通过this.getDOMNode()方法访问到DOM节点

3.componentWillUpdate(object nextProps, object nextState):组件在收到新的props或者state进行渲染之前，这时调用该方法

4.componentDidUpdate(object prevProps, object prevState):这个方法可以让我们更新已经渲染好的DOM的机会

5.componentWillUnmount():当组件的生命结束时，这个方法就会被调用

1.componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

2.shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

通过props可以把任意类型的数据传递给组件

var tables = [{title: "React"}]

可以通过this.props.tables访问对应的属性，然绝对不能修改。一个组件绝对不可以自己修改自己的props!!!

通过在组件中定义一个配置对象。组件初始化时，如果传递的属性和propsTypes不匹配，就会打印一个console.warn日志，
如果是可选的配置，就可以去掉isRequired。

要点: 示例中定义了一个组件MyTitle，其中使用propTyps对组件的属性类型进行匹配，defaultProps对组件的属性类型设置默认值。

要点: 通过this.props.children来获取组件的子节点

每个React组件都可以拥有自己的state，state与props的区别在于前者只存在于组件的内部中，this.props
表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。state可以确定
视图的状态。

要点：组件LikeButton通过constructor构造函数进行初始化状态，this.state = {liked: false} 把liked的状态设置为false,
然后通过handleClick绑定this,当用户点击按钮时，改变liked变量的状态，这时视图也会随着一起改变。

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它
插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后
再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

要点：组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户
输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。需要注意的
是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上
面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName]
属性。

要点：文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过
event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

要点：该实例代码使用了Fetch API来进行数据获取，Fetch API的具体如何使用在接下来的博客文章会介绍。

github仓库链接：https://github.com/lgybetter/ReactDemo