react展现数据

react作得最好的事，就是配合UI展现数据，经过调用接口，若是返回的数据发生改变，页面展现的数据会自动地发生改变。

 

react能够使用jsx语法，容许在js代码中直接写html标签，而且在节点上直接绑定数据，在父级和子级之间的同信时，使用props进行通讯。props是properties的简写。

为何react使用jsx更好，请查看http://reactjs.cn/react/docs/jsx-in-depth.html

 

react的组件其实很简单，能够简单的理解它就是一个函数，经过props和state来渲染页面。

在页面中存值除使用var, es6的let,const等方法还有两种方式，一个是直接绑定到this上面，还有一个是绑定在this.state,它们的区别就是，直接绑定在this上面的数据不能让页面从新渲染，对那些对页面显示没影响的数据、方法等，能够直接绑定在this上面，若是数据发生改变后，须要在页面上面从新显示，就须要绑定在this.state上面了，经过this.setState({})，从新设置了要显示的值后能够使页面从新渲染。在后面的学习部分详细再解释。

 

特别须要注意的是： react的一个组件，一次只会渲染一个根节点，若是你有多个根节点，你能够使用一个大的div 或者其余的标签把全部的节点包裹一下，使一个组件中只有一个根节点。

 

简单举例：

错误使用：

import React,{Component, PropTypes} from 'react';

class Main extends Component{
     constructor(props){
        super(this.props);
     }
    render(){
        return(
            <div className="div1"></div>
            <div className="div2"></div>
        )
    }
}    

export default Main;

 

正确使用：

import React,{Component, PropTypes} from 'react';

class Main extends Component{
     constructor(props){
        super(this.props);
     }
    render(){
        return(
            <div className="divall">
                <div lassName="div1"></div>
                <div lassName="div2"></div>
            </div>
        )
    }
} 

export default Main;

 

 

参考连接： http://reactjs.cn/react/docs/displaying-data.html