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"
   };
   //JSX
   var e = <div style="{myStyle}"></div>;
   //JavaScript
   var e = React.createElement(
   "div",{
   style : myStyle
   });
   //render
   React.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、財務、人力資源 。 默認選中人力資源。

 參考資料：course/552762019964049d1872fc88/