React核心概念

1.JSX语法

//在js的基础之上 编写标签
reactdom.render(
 
{‘hello’+‘react'}
,
document.getelementbyid('example')
)
//遇到  <   首字母是大写，组件     首字母是小写，html标签
//遇到  {   js去解析
//jsx语法会通过babel编译器转换为js的语法

2.组件

//创建组件
var MyComponent = react.createclass({
  render() {
    return 
 it is a header
  }
})
//使用组件

3.props

//在mybutton组件中获取btnname属性对应的值
this.props.btnname

//在调用当前组件时，在组件的开闭标签所写的其它的标签可以通过this.props.children来获取


  
test01
  
test01


var mylist = react.createclass({

   render() {
     return 

      {
          react.children.map(this.props.children,function(child) {
              return child
          })
      }
     
   }
})

//父子通信通过props来实现方法的传递
var mylogin = react.createclass({
   login:function(){
     console.log('登录成功');
   },
   register:function(){
    console.log('注册成功');
  },
   render：function(){
     return 

       
       
     
  }

})

4.ref

//第一步 指定ref

//第二步 根据ref得到实例
this.refs.myson//得到son组件的实例

5.state

//初始化
getinitialstate:function(){
   return {count:1,value:2}
}
//读
this.state.count
//写
this.setstate(
{count:2},
function(){}
)

//状态处理表单受控元素
//①初始化一个状态
getinitialstate:function(){return {myvalue:'123'}}
//②将状态的值绑定到视图

//③给input绑定一个onchange事件以及
对应的处理函数
handlechange:function(e){
  this.setstate({myvalue:e.target.value})
}