react从es5到es6的转变

1. require to import
1. es5: var React = require('react');var PropTypes = React.PropTypes;
2. es6: import React,{Component,PropTypes} from 'react';
2. creatClass tp extends
1. var Component = Rreact.createClass({ render: function() {return(<div>Es5</div>)}});
2. class Component extends React.Component { render() {return (<div>Es6</div>)}}
3. module exports to export default
1. var My = React.createClass( {render: function() {return (<div>es5</div>)}}) ; module.exports = My;
2. export detault class My extends React.Component { render(){function(return(<div>es6</div>))}}func
4. functions
1. var My = React.createClass({componentWillMount : function() {},render:function(){return(<div>es5</div>)}});module.exports = My;
2. exports default class My extends React.Component{componentWillMount() {}} render() {return <div>es6</div>}
5. getDefaultProps and porpTypes
1. var Video = React.createClass({getDefaultProps:function() {return {autoplay:false,maxLoop:10,};},propTypes: {autoPlay:React.PropTypes.bool.isRequired,maxLoop:React.PropTypes.number.isRequired,},render: function() {return(<view/>)}});
2. class Video extends React.Component { render() {return(<view/>)}} Video.defaultProps = { autoPlay: false,maxLoop:10,}; Video.PropTypes = {autoPlay:React.PropTypes.bool.isRequired}
6. getInitialState
1. var H = React.createClass({getInitialState: function() {return {title: this.props.title}}});
2. export default class H extends React.Component { constructor(props) {super(props); this.state = {title: props.title};}}
7. the change for event
1. handleClick:function() {this.setState({yes:true});} <div onPress={this.handleClick}></div>
2. handleClick() {this.setState = ({yes:true});} <div onPress={this.handleClick.bind(this)} 或者 onPress={e=>this.handlClick(e)}></div>
8. es6创建组件的两种写法：
1. import React from "react";class My extends React.Component { // }
2. import React,{Component} from "react";class My extends Component { // }
9. 组件生命周期：
1. componentWillMount(){ // } 等价于 constructor（props） { // }
10. 扩展操作符（父组件传递给子组件属性）
1. 没有扩展操作符：< My name={this.props.name} age={this.props.age}/>
2. 有扩展操作符：<My {...this.props }/> 若不想继承所有属性，可以在render之前 var {name,...Myprops}=this.props; render() {return (<My {...Myprops}/>)}
11. 模块化开发组件
1. import { My } from my.js”; 组件末尾是：export {My} ；如果把子组件的到处设置为default export ，导入时就不用加{}；