react props與render成員函數

  props是組件固有的屬性集合，其數據由外部傳入，通常在整個組件的生命週期中都是隻讀的，React的API頂層設計也決定了這一點。屬性初值一般由React.createElement函數或者JSX中標籤的屬性值進行傳遞，併合併到組件實例對象的this.props中。事實上，組件接受靜態信息的主要渠道就是props屬性。

好比： 

 var HelloBox = React.createClass({

　　　　　　render() {

　　　　　　return <div>{'Hello'+this.props.myattr }</div>;

　　　　　　}
　　　　})

　　　　React.render(<HelloBox myattr = "world" />,mountNode);

 

 

　　或者

　　

React.render（

　　　　React.createElement（

　　　　　　HelloBox，

　　　　　　{myattr：‘world’}

　　　　），

　　　　mountNode
　　　）；

 

　　　　props中也會包含一些由React自動填充的數據，this.props.children數組中會包含本組件實例的全部子組件，由React自動填充。另外，還能經過配置實現this.props.context跨級包含上級組件的數據等。

此外，props與state的區別體如今，props不能被所在組件修改，從父組件傳進來的屬性不會在組件內部更改；state只能在所在組件內部更改，或在外部調用setState函數間接修改狀態。

---

---

 

 

render函數

　　render主要流程是檢測this.props和this.state，再返回一個單一組件實例，也能夠返回null或者false代表不須要渲染任何東西，對應的React渲染一個<noscript>標籤來處理。當返回null或false的時候，this.getDOMNode（）將返回null。

render函數應該是純粹的，也就是說，在render函數內不該修改組件state，不讀寫DOM信息，也不與瀏覽器交互，好比調用setTimeout就是一種與瀏覽器的交互。若是確實要與瀏覽器交互，componentDidMount（）中或者其餘生命週期方法中設置。

　　React組件只能渲染單個根節點。若是想返回多個節點，它們必須被包含在同一個父節點中。