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