react做得最好的事，就是配合UI展示数据，通过调用接口，如果返回的数据发生改变，页面展示的数据会自动地发生改变。

 

react可以使用，允许在js代码中直接写html标签，并且在节点上直接绑定数据，在父级和子级之间的同信时，使用props进行通信。props是properties的简写。

为什么react使用jsx更好，请查看

 

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(            
     
            
     
        )    }}    export default Main;

 

正确使用：

import React,{Component, PropTypes} from 'react';class Main extends Component{     constructor(props){        super(this.props);     }    render(){        return(            
     
                
      
                
      
            
     
        )    }} export default Main;

 

 

参考链接：