react 隨筆1

------------------------------------------------
http://www.css88.com/react/
17-08-02 學習來源

------------------------------------------------
虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是Diff部分，於是能達到提升性能的目的。
一個簡單的組件
React 組件實現一個 render() 方法，它接收輸入數據並返回顯示的內容。此示例使用相似XML的語法，稱爲 JSX 。輸入數據能夠經過 this.props 傳入組件，被 render() 訪問。
1）獲取屬性的值用的是this.props.屬性名
2）建立的組件名稱首字母必須大寫。
3）爲元素添加css的class時，要用className。
4）組件的style屬性的設置方式也值得注意，要寫成style={{width: this.state.witdh}}。

有狀態的組件
除了獲取輸入數據（經過 this.props 訪問）以外，組件能夠維護內部 state(狀態) 數據（經過 this.state 訪問）。當組件的 state(狀態) 數據發生變化時，渲染標記將經過調用 render() 來從新更新。
當用戶點擊組件，致使狀態變化，this.setState 方法就修改狀態值，每次修改之後，自動調用 this.render 方法，再次渲染組件。
這裏值得注意的幾點以下：
1）getInitialState函數必須有返回值，能夠是NULL或者一個對象。
2）訪問state的方法是this.state.屬性名。
3）變量用{}包裹，不須要再加雙引號。

組件的生命週期
組件的生命週期分紅三個狀態：
Mounting：已插入真實 DOM
Updating：正在被從新渲染
Unmounting：已移出真實 DOM
React 爲每一個狀態都提供了兩種處理函數，will 函數在進入狀態以前調用，did 函數在進入狀態以後調用，三種狀態共計五種處理函數。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 還提供兩種特殊狀態的處理函數。
componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否從新渲染時調用

組件的嵌套

ReactJS小結
關於ReactJS今天就先學習到這裏了，下面來總結一下，主要有如下幾點：
一、ReactJs是基於組件化的開發，因此最終你的頁面應該是由若干個小組件組成的大組件。
二、能夠經過屬性，將值傳遞到組件內部，同理也能夠經過屬性將內部的結果傳遞到父級組件(留給你們研究)；要對某些值的變化作DOM操做的，要把這些值放到state中。
三、爲組件添加外部css樣式時，類名應該寫成className而不是class;添加內部樣式時，應該是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
四、組件名稱首字母必須大寫。
五、變量名用{}包裹，且不能加雙引號。