React組件開發

標籤：

目錄：

1. 屬性：props
2. 內聯樣式
3. 狀態記憶 : state
4. 生命週期
5. 訪問DOM
6. 表單輸入

承接快速入門篇：http://www.cnblogs.com/jasonnode/p/4444504.html

屬性 : props

組件應該提供一些屬性供開發人員在不同的情境下可以對組件執行個體元素的行為 外觀進行調整，這樣可以提高組件的利用效率。

在React中，使用props欄位訪問執行個體元素的屬性。

例如，在下面的JSX片段中，EzLampComp組件的執行個體元素有一個屬性onoff：

1. React.render(<ezlampcomp onoff="off"></ezlampcomp> ,document.querySelector("#content"));

那麼在EzLampComp組件的實現中，我們可以通過props欄位訪問這個屬性， 並根據屬性值設定其樣式類。

在JSX中，我們也可以將一個JavaScript運算式賦給React元素的屬性，這時需要 使用一對大括弧來代替引號：

1. var myOnoff = "on";React.render(<ezlampcomp onoff="{myOnoff}"></ezlampcomp>,document.querySelector("#content"));

    

如果你覺得不好理解，那麼我們把上面的JSX代碼轉換成JavaScript：

1. var myOnoff = "on";React.render(React.createElement(EzLampComp,{onoff : myOnoff}),document.querySelector("#content"));

    

內聯樣式

在前面的樣本中，每當需要設定元素的樣式，我們總是使用樣式類。但有時我們的確需要 直接在元素上聲明內聯樣式，就像在HTML中一樣：

1. //HTML<div style="width:200px;height:200px;"></div>

    

在React元素中聲明樣式，需要給出一個JSON對象，其欄位對應樣式名稱，比如要渲染出 上面的HTML片段，需要這樣：

1. var myStyle = {width:"200px",height:"200px"};//JSXvar e = <div style="{myStyle}"></div>;//JavaScriptvar e = React.createElement("div",{style : myStyle});//renderReact.render(e,...);

    

• 注意1 - 對應樣式名稱的欄位，需要使用駝峰式命名

比如：border-radius樣式需要使用borderRadius來訪問，而background-image 樣式需要使用backgroundImage來訪問。

• 注意2 - 樣式名稱中的供應商首碼，除ms外都需要大寫首字母

對於供應商首碼（-webkit, -moz, -o, -ms），除了ms，其他都需要將首字母大寫。 比如：-webkit-transition應當通過WebkitTransition來訪問，然而-ms-transition 則需要通過msTransition來訪問。

 

狀態記憶 : state

很多情況下，組件執行個體的外觀及行為通過使用props變數進行定製就可以了。 這樣的組件我們稱之為無狀態/stateless的組件，因為在任何時刻，組件 執行個體的表現都僅僅取決於外部傳入的props屬性，與 它自身之前的表現毫無關係，即，它本身沒有任何記憶。

讓一個組件擁有記憶能力，意味著它不僅能對外界的刺激產生反應（通過props 傳入的資料、或使用者的互動事件），也能根據自身的狀態對同樣的刺激做出 不同的反應。

比如樣本中的切換開關，它可以響應使用者的點擊事件，如果目前狀態是關，那麼它就 切換到開的狀態（顯示開狀態的圖片）；而如果目前狀態是開，那麼它就切換到關的 狀態（顯示關狀態的圖片）：

現在思考一下，使用props可以實現這個切換開關嗎？

React的組件的確引入了狀態機器的概念，通過將組件劃分為不同的狀態，使組件具有 了一定的記憶能力：

• state - 組件的狀態變數

每個React組件執行個體都有一個state變數，用來儲存組件的目前狀態。可以在 任何時刻使用this.state讀取目前狀態。

• getInitialState() - 設定組件初始狀態

組件的實現者應當實現一個getInitialState()方法來設定組件的初始狀態。 getInitialState()方法必須返回一個JSON對象或空值null， 這意味著即使你只需要一個簡單的標誌作為狀態，比如true或false，也要把它放到JSON對象裡。

• setState(currentState) - 設定組件目前狀態

儘管可以使用this.state來直接設定組件目前狀態，但React要求我們使用 setState()方法來進行狀態設定。這是因為，setState()方法會自動 地重新渲染組件，而這通常是我們所期望的。

參數currentState是一個JSON對象，不必包含狀態變數的所有欄位，setState()方法會 將這個參數值與目前狀態this.sate進行合并，結果作為狀態變數的新值。

 

生命週期

在組件執行個體的整個周期中，React將在特定的時間點調用以下方法：

• componentWillMount() - 組件執行個體即將掛接（初次渲染）時被調用

這個方法在整個生命週期中只會被調用一次。

• componentDidMount() - 組件執行個體掛接（初次渲染）後被調用

這個方法在整個生命週期中只會被調用一次。

• componentWillReceiveProps(nextProps) - 組件執行個體即將設定新屬性時被調用

參數nextProps表示即將應用到組件執行個體上的新屬性值。

這個方法在初次渲染時不會被調用。在此方法內調用setState()不會引起重新渲染。

• shouldComponentUpdate(nextProps, nextState) - 組件執行個體即將重新渲染時被調用

參數nextProps傳入即將應用到組件執行個體上的新屬性值，參數nextState傳入組件執行個體即將被 設定的狀態值。如果這個方法返回false，那麼組件執行個體就不會被重新渲染。除非我們明確地 知道，新的屬性和狀態不需要進行重新渲染，否則這個方法都應該返回true。

這個方法在初次渲染時或通過forceUpdate()方法進行渲染時不會被調用。

• componentWillUpdate(nextProps, nextState) - 組件執行個體即將重新渲染時被調用

這個方法在初次渲染時不會被調用。注意：不能在此方法內調用setState()。

• componentDidUpdate(prevProps, prevState) - 組件執行個體重新渲染後被調用

這個方法在初次渲染時不會被調用。

• componentWillUnmount() - 組件執行個體即將從DOM樹移除時被調用

這個方法在整個生命週期中只會被調用一次。

 

訪問DOM

在React中，有時需要直接存取React元素對應的DOM對象，比如讀取使用者的輸入。 這需要兩個步驟：

• 設定React元素的ref屬性

如果需要在代碼中訪問某個React元素的DOM對象，那麼首先需要設定這個React 元素的ref屬性。

比如，我們需要讀取文本輸入框的值，那麼首先給這個input元素指定ref屬性：

1. //JSX<input type="text" defaultvalue="beijing" ref="q" placeholder="請輸入城市拼音，如：beijing">

聲明了React元素的ref屬性之後，可以通過this.refs對象訪問 這個組件，比如上面的樣本中：this.refs.q指向input組件對象，你應該已經注意到， 我們為React元素設定的ref屬性值，在這裡被用為this.refs對象的索引值。

• 獲得DOM對象

在設定了React元素的ref屬性後，可以使用React.findDOMNode()方法獲得對應的 DOM對象：

1. React.findDOMNode(component)

參數component是一個React組件對象，如前所述，我們可以通過this.refs對象獲得。

如果React元素已經渲染到DOM樹上，findDOMNode()方法將返回組件對象對應的DOM節 點對象，後續就可以使用標準的DOM API操作這個DOM對象了。

 

表單輸入

在React中，表單輸入元素如 input, textarea, option等，和其他標準的HTML元素 相比需要特殊的注意：

• 文本輸入框

不要使用value屬性設定文本輸入框元素的初值，應當使用defaultValue：

1. //JSX<input type="text" defaultvalue="demo">

• 複選按鈕

不要使用checked屬性設定複選按鈕的初始選中狀態，應當使用defaultChecked：

1. //JSX<input type="checkbox" defaultchecked="">

• 選項按鈕組

不要使用option元素的selected屬性設定選項按鈕組的初始選中狀態，應當使用 select元素的defaultValue：

1. //JSX<select defaultvalue="A"><option value="A">China</option><option value="B">India</option><option value="C">Japan</option></select>

在  範例程式碼 中添加一個要登入系統的選擇框，使其看起來像這樣：

可選的系統有：OA、財務、人力資源 。 預設選中人力資源。

 

React組件開發