React核心概念

1.JSX语法

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

2.组件

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

3.props

<mybutton btnname="登录"></mybutton>

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

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

<mylist>
  <li>test01</li>
  <li>test01</li>
</mylist>

var mylist = react.createclass({

   render() {
     return <ul>
      {
          react.children.map(this.props.children,function(child) {
              return child
          })
      }
     </ul>
   }
})

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

})

4.ref

//第一步 指定ref
<son ref="myson"></son>
//第二步 根据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 type="text" value={this.state.myvalue}/>
//③给input绑定一个onchange事件以及
对应的处理函数
handlechange:function(e){
  this.setstate({myvalue:e.target.value})
}

<input type="text"
onchange={this.handlechange} value={this.state.myvalue}/>