React

Learn once,Write anywhere. —— React

入门:

1. Hello React: React.createElement(type[,pros][,children]). 参数type:组件类型(字符串或者React组件类型),是字符串时应为Html 标准标签;pros:为JSON对象(css类和样式);children:子元素.
2. React.render(element,container[,callback]):参数element为createElement返回的React元素;container:为Html中真实存在的Dom元素.callback:渲染后回调函数.
3. React.createClass(meta):参数meta:是一个对象,至少含一个render方法，并且该方法返回一个React元素。
4. JSX:在js中写html是件痛苦的事情,在调用createElemet方法时可以用原生的html代码(但是内嵌的class要其换成className)

组件:

1. 内联样式:使用props字段访问实例元素的属性:创建一个组件(var e = React.createClass({render:function(){var onoff = this.props.onoff;if(onoff == "on")return <p>hello react</p>;}}));React.render((用js:React.createElement(e,{onoff:"on"})等同于用jsx:<e onoff="on" />),dom对象)
2. 记忆状态state:每个组件实例内部有一个state变量用来保存组件当前的状态。getInitialState(){}必须要返回一个json对象或者null,来初始化组件的状态,setState(){}来设置组件状态,并且能重新渲染组件;

3. 组件生命周期: componentWillMount()组件初始化挂载之前调用,在组件的生命周期内只调用一次. componentDidMount()组件组件初始化挂载完毕之后调用,在组件的生命周期内只调用一次. componentWillReceiveProps(nextProps)组件在添加新属性后调用，shouldComponentUpdate(nextProps,nextState)组件即将重新渲染时调用,componentWillUpdate(nextProps,nextState)组件即将重新渲染时调用,componentDidUpdate(prevProps,prevState)组件重新渲染后调用,componentWillUnmount()组件从dom中移除时调用，在组建生命周期内值调用一次

4. 访问dom:直接访问DOM元素,通过设置React元素的ref属性,例如React.createClass()返回一个<input type="text" ref="q"></input>,并且添加到了DOM树中,可以通过React.findDOMNode(this.refs.q)来访问该dom对象。
5. 表单输入注意事项:<input type="text" >初始值不要使用value而是要用defaultValue.复选按钮checked改为defaultChecked,单选按钮selected改为defaultValue