react 学习笔记（一） 入门实例

一：react了解
    //是react的核心库
    //是将jsx语法转为javascript语法JSX的基本语法：遇到html标签（以<开头)，就用html规则解析，  遇到代码块（以{开头），就用javascript规则解析

二：ReactDOM.render() //将模板转为HTML语言，并插入指定的DOM节点。
例：

ReactDOM.render(
   

hello

,
   document.getElementById('demo') 
 )

三：React.createClass()  //生成一个组件类
例：

var HelloName = React.createClass({
      render:function(){
                return  

hello {this.props.name}

     }
})

ReactDOM.render(
          ,
          document.getElementById('demo')
)

解析：1.HelloName就是一个组件类，模板插入.会自动生成一个实例；所有的组件类都必须要有自己的render方法，用于输出组件； 
 2.helloName组件加入了一个name属性，组件的属性可以在组件类的this.props对象上获取；
注意：1.组件类的第一个字母必须要大写， 
 2.只能包含一个顶层标签；

四：this.props.children  //属性,表示组件的所有子节点
它的值可能有三类，没有子节点的时候underfined,一个子节点的时候是object,多个Arrray;React提供了一个工具方法React.Children来处理this.props.children,利用React.Children.map来遍历子节点this.props.children;
例：

var NoteList = React.createClass({
        render:function(){
                  return 

                              {
                                    React.Children.map(this.props.children,function(child){
                                            return
1. {child}

                                    })
                              }
                 

     }
)}

ReactDOM.render(
   
              nana
              xiaona
   ,
    document.getElementById('demo')
)

五：组件类的PropTypes属性，用来验证组件实例的属性是否符合要求;
例：

var MyTitle = React.createClass({
      PropTypes:{
                  title:React.PropTypes.string.isRequired,
      },
     render:function(){
            return 

{this.props.title}

     }
})

ReactDOM.render(
          ,
        document.getElementById('dom')
)

React.PropTypes告诉React这个title属性是必须的，而且必须是字符串；

六：getDefaultProps() //设置组件属性的默认值
 例：

var MyName = React.createClass({
           getDefaultProps:function(){
                  return {name:'xiaona'}
           },
          render:function(){
              return 

{this.props.name}

          }
})

ReactDOM.render(
        ,
         document.getElementById('dom')
)

七：getInitialState() // 设置组件的初始状态
 例：

var ButtonLink = React.createClass({
          getInitialState:function(){
                    return {link:false}
          },
          handleChangeState:function({
                this.setState({
                        link:!this.state.link
                })
        },
        render:function(){
                var text = this.state.link ? '选择' : '不选';
                return 

{text}

      }
});
ReactDOM.render(
      ,   
    document.getElementById('demo6') 
)

详解：1.getInitilaState(); 设置组件初始状态；
           2.this.setState({}) ; 修改组件初始状态； 
           3.this.state; 获取组件初始状态的某一值；

八：获取真实dom节点
组件并不是真实的dom,而是虚拟dom,存在于内存之中，插入文档之后，才会变成真实dom; 需要获取到真实的dom节点，用到ref属性；例：

var  InputText = React.createClass({
          handleGetValue:function(){
                    this.refs.textValue.focus();
           },
          render :function(){
              return (
                     

                               
                               
                     

              )
         }
});
ReactDOM.render(
          ,
         document.getElementById('demo')
)

详解：1.虚拟dom是拿不到用户输入的内容；文本输入框必须要有一个ref属性，然后this.refs.[refName]就会返回真实的dom节点； 
 2.this.refs.[refName]属性获取的是真实的dom,所以必须等到虚拟dom插入文档以后；所以通过为组件指定click事件的回调函数，确保只有等到真实dom发生click事件之后，才会读取this.refs.[refName]属性；

九：表单获取input的值 event.target.valuevar 

var GetVlaue = React.createClass({   
      getInitialState:function(){ 
          return { text:'请输入默认值', }
      },
      handelGetText:function(event){
           this.setState({text:event.target.value})
      },
    render:function(){
          return (
                 

                             
                              {this.state.text}
                 

           )
    }
});

ReactDOM.render(
    ,
    document.getElementById('demo8')
）

十：组件的生命周期分为3个状态 ： 

Mounting插入真实的dom   
updating正在被重新渲染 
Unmounting移除出真实dom

3种状态共计5种处理函数

compontentWillMount() 插入真实dom之前；
compontentDidMount() 插入真实dom之后；
剩下的集中待理解之后；

十一：Ajax