------------------------------------------------
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今天就先學習到這里了，下面來總結一下，主要有以下幾點：
1、ReactJs是基于組件化的開發，所以最終你的頁面應該是由若干個小組件組成的大組件。
2、可以通過屬性，將值傳遞到組件內部，同理也可以通過屬性將內部的結果傳遞到父級組件(留給大家研究)；要對某些值的變化做DOM操作的，要把這些值放到state中。
3、為組件添加外部css樣式時，類名應該寫成className而不是class;添加內部樣式時，應該是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4、組件名稱首字母必須大寫。
5、變量名用{}包裹，且不能加雙引號。

轉載于:https://www.cnblogs.com/Alice-zy2/p/9247648.html

總結

以上是生活随笔為你收集整理的react 随笔1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。