###理解ReactDOM.render
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点
1、此方法接受两个参数，中间用逗号隔开，第一个参数要么是

###组件 React.createClass

var ComponentModel =  React.createClass（{
    render:function(){ return ****; }
    }）;

1、组件只能包含一个顶层标签，不能包含两个顶层标签，否则报错
2、组件属性名，避免和JavaScript的保留字冲突，class改成className，for改成hemlFor。(自己试验了下，不改也是ok的，奇怪了)
3、 React.createClass(),括号里，必须用‘{’大括号把render:function(){return *;}包裹起来

###this.props.children
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
这里比较有意思的是：

var NotesList = React.createClass({
render: function(){
    return (
    <div>
    {
        React.Children.map(this.props.children,function(child){
        return <span>{child}</span>;
        })
    }
    </div>
    );
}
});

ReactDOM.render(
    <NotesList>
        <span>hello 第一</span>
        <span>world 第二</span>
    </NotesList>,
    document.getElementById("container1")
);

其中：
return (
    <div>
    {
        React.Children.map(this.props.children,function(child){
        return <span>{child}</span>;
        })
    }
    </div>
    );
return后面跟的()后面必须是html标签。不能直接‘{’大括号。

###PropTypes
验证组件实例的属性是否符合要求

/*** 组件的属性定义验证 ***/
var MyTitle = React.createClass({
propTypes:{
    title:React.PropTypes.number.isRequired,
},
render:function(){
    return <span>{this.props.title}</span>;
}});

ReactDOM.render(
    <MyTitle title={520.1314}/>,
    document.getElementById("container")
);

1、propTypes: 第一个字母大小写都ok
2、function(){
    return <span>{this.props.title}</span>;
}})必须有html标签括起来
3、title的值，string可以直接“字符串”，数字的话需要用大括号括起来"{520.1314}"


否则会报类似：Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.的错误

###状态state的改变
模板代码

var LinkedButton = React.createClass({
getInitialState:function(){
    return ({liked : false});
}
,
handleClick: function(){
    this.setState({liked: !this.state.liked});
}
, 
render: function(){
    var text = this.state.liked ? 'like':'haven\'t liked';
    return (<p onClick={this.handleClick}>
        You {text} this.Click to toggle.
    </p>)
}
});

ReactDOM.render(
<LinkedButton />,
document.getElementById("container")
);

Reat 改变控件状态 state，属性props的话，一经定义，就改不了了，使用state状态的话可以改

###表单提交
文本输入框(input)中的内容(value),若想读取到的话，不能使用this.props.value读取，要定义一个onChange事件的回调函数，通过event.target.value读取用户输入的值,textarea元素、select元素、radio元素都属于这种情况。

1、创建组件时，value属性写法为={value},其中的value值要在此function中创建。
2、必须有onChange事件监听，去处理触发改变后的动作
3、触发改变的事件里，改变状态值的写法为：this.setState({value:event.target.value}),必须通过event.target.value去获取到事件的改变值。
4、getInitialState:function中，必须返回(return)一个值写法为：{value:’this is a init value.’};

/*** 做一个表单提交组件 ***/
var InputComponent = React.createClass({
getInitialState:function(){
    return {value:'this is a init value.'};
}
,
handleTextChange:function(event){
    console.log(event.target.value);
    this.setState({value:event.target.value});
}
,
render: function(){
var value = this.state.value;
return (<div>
    <input type="text" name="inputComponent" value={value} onChange={this.handleTextChange} />
    <p>{value}</p>
</div>);
}
});


ReactDOM.render(
    <InputComponent />
    ,
    document.getElementById("container")
);

###生命周期
组件的生命周期分成三个状态：

• Mount：已插入真实 DOM
• Updat：正在被重新渲染
• Unmount：已移出真实 DOM

/*** 组件的生命周期练习 ***/
var LifeCycleComponent = React.createClass({
    getInitialState:function(){
     return { opacity: 1.0};
    }
    ,
    componentWillMount:function(){
        /**只会调用一次,相当于onCreate()**/
        console.log("渲染前...."+new Date().getMilliseconds());
    }
    ,
    componentDidMount:function(){
        /**只会调用一次,一次性的onResume()方法 **/
        console.log("渲染完成"+new Date().getMilliseconds());
        setInterval(function(){
        var mOpacity = this.state.opacity;
        mOpacity -= 0.05;
        if(mOpacity < 0.1){
            mOpacity = 1.0;
        }
        this.setState({opacity:mOpacity})
        }.bind(this),100);
    }
    ,
    componentWillUpdate:function(){
        /**可重复调用，相当于reStart()**/
        console.log("将要重新渲染...."+new Date().getMilliseconds());
    }
    ,
    componentDidUpdate:function(){
        /**可重复调用，相当于reStart()后的onResume**/
        console.log("重新渲染完成"+new Date().getMilliseconds());
    }
    ,
    componentWillUnmount:function(){
        console.log("移出真实DOM"+new Date().getMilliseconds());
    }
    ,
    render: function(){
        return (<div style={{opacity:this.state.opacity}}>
            <p>Hello {this.props.name}!</p>
        </div>);
    }
});

ReactDOM.render(
    <LifeCycleComponent name="World"/>
    ,
    document.getElementById("container")
);

怎么理解生命周期里需要bind()及其bind在this参数的这个this的意义。

###Ajax嵌入使用
使用过程中需要注意的地方：
1、首先需要导入jquery.js
2、其中标识解析时，注意，导入js是src=”jquery.min.js”,而编写React时，,是type，而不是src。
3、组件中

render:function(){
return (<div></div);/** <div>外面就是return的"()",不能用“{}”包裹 ***/
}

##常见问题
Warning: Each child in an array or iterator should have a unique “key” prop. Check the top-level render call using