1、定义组件--组件===class##

class 名字 extends React.Component{
 render(){
  return <span>111</span>
 }    
}；

2、使用组件##

ReactDOM.render(){
  <名字 />,
 document.getElementById('div1')
}；

3、状态##

属性是固定的{this.props.name},状态是可变的{this.state}

*向文本框中输入数据span标签内容也改变*
*初始化*
constructor(...args){
 super(...args);//执行父类的构造函数
 this.state={value:''};//子类的构造函数
}

*方法*
fn(ev){
 this.setState({
  value:ev.target.value
 });
}

*渲染*
render(){
 return <div>
  <input type="text" onChange={this.fn.bind(this)}>
  <span>{this.state.value}</span>
</div>
}

4、react组件的生存周期#

componentWillMount()//创建之前
componentDidMount()//创建之后
componentWillUpdate()//更新之前
componentDidUpdate()//更新之后
componentWillUnmount()//卸载之前
componentWillReceiveRrops()//组件参数更新

5、父组件子组件###

*实现点击按钮数字依次加1*
class ChildComp extends React.Component{
 render(){
  return <span>{this.props.name}</span>;
 }
}
class ParentComp extends React.Component{//父组件中渲染子组件
 constructor(...args){
  super(...args);
  this.state={i:0};
 }
 fn(){
  this.setState({
   i:this.state.i+1
  })
 }
 render(){
  return <div>
   <input type="button" value="点击" onClick={this.fn.bind(this)}/>
   <ChildComp name={this.state.i}/>
  </div>;
 }
}
window.onload=function(){
  ReactDOM.render({
   <ParentComp/>,
   document.getElementById('example')
  })
}

6、组件的节点refs##

class Title extends React.Component{
 constructor(...args){
  super(...args);
  this.state={color:'black'};
 }
 fn(){
  $(this.refs['s1'].css('color','red'))
 }
 render(){
  return <div>
   <input type="button" value="按钮">
   <span ref="s1">123456</span>
  </div>
 }
}

6、表单控件##

defaultValue={this.props.a}//定义初始化表单的内容不用value
defaultChecked='true'//初始化单选框的状态可改变
class Use extends React.Component{
  render(){
   return <form action="http://baidu.com" method="get">
    <input type="text" defaultValue={this.props.a}/>
    <input type="checkbox" defaultValue='true'/>
   </form>
  } 
}  
$(function(){
 <Use a='blue'/>,
 $('view')[0]
})

7、组件间的通信##

 *父组件给子组件通信*
class Child extends React.Component{
 constructor(...args){
  super(...args);
  }
 render(){
   return <div>{this.props.data_a}</div>
 }
}
class Parent extends React.Component{
 constructor(...args){
  super(...args);
  this.a=12;
 }
 render(){
  return <div>
   <Child data_a={this.a}/>
  </div>
 }
}

$(function(){
 ReactDOM.render(
  <Parent/>,
  $('div')[0]
 )
})

*子组件给父组件通信*
class Child extends React.Component{
 constructor(...args){
  super(...args);
  this.num=12;
  }
 render(){
   this.props.back(this.num);//获取子组件参数
   return <div>{this.props.data_a}</div>
 }
}
class Parent extends React.Component{
 constructor(...args){
  super(...args);
  this.a=12;
 }
 fn(num){//将子组件参数传入父组件
  alert(num)
 }
 render(){
  return <div>
   <Child back={this.fn.bind(this)}/>
  </div>
 }
}

$(function(){
 ReactDOM.render(
  <Parent/>,
  $('div')[0]
 )
})