react书写方法

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

class 名字 extends React.Component{
 render(){
  return 111
 }    
}；

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 

  
  {this.state.value}

}

4、react组件的生存周期#

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

5、父组件子组件###

*实现点击按钮数字依次加1*
class ChildComp extends React.Component{
 render(){
  return {this.props.name};
 }
}
class ParentComp extends React.Component{//父组件中渲染子组件
 constructor(...args){
  super(...args);
  this.state={i:0};
 }
 fn(){
  this.setState({
   i:this.state.i+1
  })
 }
 render(){
  return 

   
   
  
;
 }
}
window.onload=function(){
  ReactDOM.render({
   ,
   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 

   
   123456
  
 }
}

6、表单控件##

defaultValue={this.props.a}//定义初始化表单的内容不用value
defaultChecked='true'//初始化单选框的状态可改变
class Use extends React.Component{
  render(){
   return 

    
    
   
  } 
}  
$(function(){
 ,
 $('view')[0]
})

7、组件间的通信##

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

   
  
 }
}

$(function(){
 ReactDOM.render(
  ,
  $('div')[0]
 )
})

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

   
  
 }
}

$(function(){
 ReactDOM.render(
  ,
  $('div')[0]
 )
})