React简述

//自定义组件<ClickButton>
var ClickButton = React.createClass({ 
  render : function(){
    var styleObj = {
      backgroundColor : '#333' , //B.样式对象, 样式全部用驼峰命名, 和操作原生dom.style一样
      color: '#dddddd'
    }
    //E.子组件的ref属性是用来方便选择与定位
    //B.样式需要指定style对象, 或自己写一个{}对象
    //A.类名控制需要用className属性来控制
    return ( 
      <div>
        <button onClick={this.showOrHide} style={styleObj} className="likeThis">显示 | 隐藏</button><span ref="tip">测试点击能不能显示和隐藏</span> 
      </div>
    ) ; //C.onClick等驼峰式绑定方法是react定义事件的方式, 编写方式类似原生绑定, 但因为这里是虚拟dom, 所以自由度很高且没有一系列问题
  },
  showOrHide: function(event){ //C.绑定的click方法
    var tipE = React.findDOMNode( this.refs.tip ) ; //E. this.refs[ 子组件的ref属性的名字 ], 这个获取到虚拟的dom, 然后用findDOMNode来获取到真实dom
    if ( tipE.style.display === 'none'){
      tipE.style.display = 'inline' ;
    }else{
      tipE.style.display = 'none' ;
    }
    event.stopPropagation() ; //这个event是react封装后的event方法, 比原生的强
    event.preventDefault() ;
  },
  //D.注一: 生命周期一Mount
  componentWillMount: function(){
    console.log( 'will Mount' ) ;
  },
  componentDidMount: function(){
    console.log( 'did Mount' ) ;
  },

}) ;
//自定义组件<InputArea>
var InputArea = React.createClass({
  getInitialState: function(){
    return {
      inputValue : '' ,
    }
  },
  render : function(){
    return (
      <div>
        <input type="text" onChange={this.changeTip} /><span>默认值: {this.props.defaultValue} 内部属性inputValue: {this.state.inputValue}</span>
      </div>
    ) ; //I.{}这个符号表示其内部是表达式
  },
  changeTip : function(event){ //G.onChange时触发
    this.setState({
      inputValue : event.target.value 
    }) ;
    event.stopPropagation() ;
    event.preventDefault() ;
  },
  //H.注二: 生命周期二Update
  componentWillUpdate: function(){
    console.log( 'will update' ) ;
  },
  componentDidUpdate: function(){
    console.log( 'did update' ) ;
  }
}) ;
//J.render们接受的虚拟dom元素都必须是单个元素, 不能是多个元素, 所以这里要渲染两个元素必须得用个div包裹起来
//F.其上的属性可以在render时用this.prop获取到
React.render( ( 
  <div>
    <ClickButton />
    <InputArea defaultValue="render调用时定义" />
  </div>
) , document.getElementById('container') )