ReactJs

1.react独有的JSX语法，故<script type="text/babel"></script>
react.js是react的核心库；react-dom.js是提供DOM相关的功能；Brower.js作用是将JSX语法转为javaScript语法
2.ReactDOM.render()是React最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点
3.JSX语法:HTML语言直接写在JavaScript语言之中，不加任何引号,
规则：遇到 < 开头就用HTML规则解析，遇到代码块 { 开头，就用JavaScript规则解析
var names = ['aa','bb','ss']
ReactDOM.render(
<div>
{names.map(function(name){return <div>hello,{name}</div>})
}
</div>
document.getElementById('example')
)
4.react组件，React.createClass方法就用于生成一个组件类
****组件类的第一个字母必须大写
组件类只能包含一个顶层标签，就是下面的return里面只能有一个标签，如果加一个p标签则报错
组件的属性可以在组件类的this.props对象上获取
添加组件属性，注意的是 class属性需要写成className,for属性写成htmlFor，这是因为class和for是JavaScript的保留字

注意：定义标签时，只允许被一个标签包裹 原因是：一个标签会被转译成对应的React.createElement调用方法，最外层没有被包裹 显然是无法转译成方法调用的

　　小写首字母对应的是DOM元素，组件元素对应大写首字母

this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性，它表示组件的所有子节点

在构造函数中可以通过props获得传入的prop,在其他函数中通过this.props访问传入的prop的值
如果没有子节点就是undefined，有一个就是object，有多个就是array
react.Children来处理this.props.children 可以用React.props.children来遍历，
React.Children.map(this.props.children,function(child){
return <li>{children}</li>
}

var helloMessage = React.createClass({
render:function() {
*****return <h1>Hello {this.props.name}<h1>
}
});
ReactDOM.render(
<HelloMessage name="alhh" />
document.getElementById('example')
)
})
5.PropTypes
组件的属性可以接受任意值，字符串、对象、函数等，有时需要一种机制，验证别人使用组件时，提供的参数是否符合要求，
PropTypes属性，就是用来验证组件实例的属性是否符合要求
getDefaultProps 方法可以用来设置组件属性的默认值
6.获取真实的DOM节点
注意 由于this.refs.[refName]属性获取的是真实DOM.所以必须等到虚拟DOM插入文档以后，才能使用这个属性，否则会报错，
以下代码为组件指定click事件，确保了只有等到真实DOM发生Click事件之后，才会读取this.refs.[refName]属性
var MyComponent = React.createClass({
handleClick:function(){
this.refs.myInfut.focus();
}})
render:function(){
return (
<input type="text" ref="myInput"/>)}
7.this.state
React将组件看成一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI
this.props和this.state都用于描述组件的特性，可能会产生混淆，区分方法是，this.props表示那些一旦定义就不再改变的特性
this.state是会随着用户互动而产生变化的特性
8.组件的生命周期
组件的生命周期分为三个状态：Mounting:已插入真实DOM,Updating:正在被重新渲染 ，Unmounting:已移出真实DOM
React为每个状态都提供了两种处理函数，will函数时在进入状态之前调用，did在进入状态之后调用，三种状态共计有5种处理函数
componentWillMount() componmentDidMount()
componentWillUpdate(object nextProps,object nextState)
componentDidUpdate(object prevProps,object prevState)
componentWillUnmount()
另外，react还提供两种特殊状态的处理函数
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps,object nextState):组件判断是否重新渲染时调用
React组件样式是一个对象，style = {{opacity:this.state.opacity}} 第一个大括号是js语法，第二个大括号表示样式对象

componentWillReceiveProps:组件收到新的props时会触发，（即当父级组件render刷新了子组件的props时触发）此时更新状态