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