月份：2017年6月

参考：http://www.ruanyifeng.com/blog/2015/03/react.html

其中，React在ES6中去掉了getInitialState这个hook函数，规定state在constructor中实现。

自己用Demo：

var React = require('common:static/libs/react/react.min.js');
var ReactDOM = require('common:static/libs/react/reactdom.min.js');
var data =1;

var names=[
  <h1>Hello,World</h1>,
  <h2>React</h2>
];

var HelloMessageAnother = React.createClass({
  render:function(){
    return <div>Hello,{this.props.name}!</div>;
  }
});

var HelloMessage = React.createClass({
  render(){
    return <div>Hello,{this.props.name}!</div>;
  }
});

var MyTitle = React.createClass({
  propTypes:{
    title: React.PropTypes.string.isRequired,
  },
  
  render:function(){
    return <h1>{this.props.title}</h1>
  }
});

var MyTitleAnother = React.createClass({
  getDefaultProps:function(){
    return{
      title:'Hello World'
    };
  },
  render:function(){
    return <h1> {this.props.title} </h1>;
  }
});

var TestDom = React.createClass({

  handleClick:function(){
    this.refs.myTextInput.focus();
  },
  render:function(){
    return(
      <div>
        <input type="text"  ref="myTextInput" />
        <input type ="button" value = "focus the text input" onClick={this.handleClick}/>
      </div>
      );
  }

});

var LikeButton = React.createClass({
   getInitialState:function(){
    return {liked:false};
   },

   changeLike:function(){
    this.setState({liked:!this.state.liked});
   },

   render:function(){
    var text = this.state.liked?'like':'haven\'t liked';
    return(
      <p onClick={this.changeLike}>
        You {text} this. Click to toggle.
      </p>
      );
   }
});

var InputChangeState = React.createClass({
  getInitialState:function(){
    return {text:"Hello"};
  },

  changeInput:function(event){
    this.setState({
      text:event.target.value
    });
  },

  render:function(){
    var value = this.state.text;
    return (
      <div>
        <input type="text" onChange = {this.changeInput} />
        <p>{value}</p>
      </div> 
    );
  }
});

var OpacityComponent = React.createClass({
  getInitialState:function(){
    return {opacity:1.0};
  },

  componentDidMount:function(){
    this.timer = setInterval(function(){
      var opacity = this.state.opacity;
      opacity -= .05;
      if(opacity<0.1){
        opacity = 1.0;
      }
      this.setState({
        opacity:opacity
      });
    }.bind(this),100);
  },

  render:function(){
    return (
      <div style={{opacity:this.state.opacity}}>
        Hello,{this.props.name}
      </div>
      );
  }
});


ReactDOM.render(
  // <HelloMessage name="john"/>,
    // document.getElementById('test')

  // <MyTitle title={data} />,
  // document.body

  // <MyTitleAnother/>,
  // document.body

  // <TestDom />,
  // document.getElementById("test")

  // <LikeButton />,
  // document.getElementById("test")

  // <InputChangeState />,
  // document.getElementById("test")

  <OpacityComponent name="World"/>,
  document.getElementById("test")
);

ES6：

var React = require('common:static/libs/react/react.min.js');
var ReactDOM = require('common:static/libs/react/reactdom.min.js');

class SubmitOrderComponent extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			ownerTel : "aaa"
		}
	}


	render(){
	    let self=this;	
	    return(
	        <div>
		//代码 注意外层必须有其他标签包着，不然会报错
		</div>
	    );
	}
};

ReactDOM.render(
	<SubmitOrderComponent />,
	document.getElementById("submitOrder")
);

基本流程：

var React = require('common:static/libs/react/react.min.js');
var ReactDOM = require('common:static/libs/react/reactdom.min.js');

class ArrayComponent extends React.Component{
constructor(props){
    super(props);
    this.state = {
      ownerTel : "aaa"
    }
  }

  getTest(){
    return (
      <h1>Hello</h1>
    );
  }

  render(){
    let self = this;
    return( 
      <div> //没有这个标签将会报错
        <div>Hello,ES6 {self.state.ownerTel}</div>
        {self.getTest()}
      </div>
    );
  }
};

ReactDOM.render(
  <ArrayComponent />,
  document.getElementById("test")
);

在所有的return中如果是一个标签可以直接返回，如果多个标签必须最外面再包一层，要保证return回的只有一个元素。

关于数组遍历：

var nameArray=[
  {
    "name":"aaaa",
    "age":"12"
  },
  {
    "name":"bbb",
    "age":"13"
  }
]
  //如下两种方法都可以进行遍历
 getArrayElement(){
    var str = "";
    for (var i = 0; i < nameArray.length; i++) {
      str = str + " " + nameArray[i].name + "/" + nameArray[i].age ;
    }
    return str;
  }

  getArrayMap(){
    var str = "";
    nameArray.map(function(n){
      str = str + " " + n.name + "/" + n.age;
    })
    return str;
  }

关于map：

var nameArray=[
  {
    "name":"aaaa",
    "age":"12"
  },
  {
    "name":"bbb",
    "age":"13"
  }
]

  getArrayMap(){
    return(
      nameArray.map(function(n){
        return <div>" " + n.name + "/" + n.age;</div>
      })
    )
  }

//对于map，因为其里面的函数function（n），会遍历数组生成
对应<div></div>包含的语句，在数组遍历外层需要用return()再
将返回的每条语句返回，这样就会打印出多条<div></div>包含的语句了。
但是此时<div></div>中的变量并未识别，还需要用{}.
所以正确的应该是：

  getArrayMap(){
    return(
      nameArray.map(function(n){
        return <div>{ " " + n.name + "/" + n.age}</div>
      })
    )
  }

 

关于函数调用：

非render中函数调用直接用：this.函数名()，如果在render中用self.函数名.bind(this)