什么是React？

React 是一個用于構建用戶界面的 JAVASCRIPT 庫。
React主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。
React 起源于 Facebook 的內(nèi)部項目，用來架設 Instagram 的網(wǎng)站，并于 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
既可以開發(fā)瀏覽器應用，又可以開發(fā)移動應用

React 特點

• 1.聲明式設計 ?React采用聲明范式，可以輕松描述應用。
• 2.高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。
• 3.靈活 ?React可以與已知的庫或框架很好地配合。
• 4.JSX ? JSX 是 JavaScript 語法的擴展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。
• 5.組件 ? 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發(fā)中。
• 6.單向響應的數(shù)據(jù)流 ? React 實現(xiàn)了單向響應的數(shù)據(jù)流，從而減少了重復代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

什么是JSX？

React 使用 JSX（JavaScript XML） 來替代常規(guī)的 JavaScript。JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。我們不需要一定使用 JSX，但它有以下優(yōu)點：
?JSX 執(zhí)行更快，因為它在編譯為 JavaScript 代碼后進行了優(yōu)化。
?它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯誤。
?使用 JSX 編寫模板更加簡單快速。

State（狀態(tài))
React 把組件看成是一個狀態(tài)機（State Machines）。通過與用戶的交互，實現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。
React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。
不需要直接操作DOM，而是通過修改state，自動更新界面

Props（屬性）
state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)。 而子組件只能通過 props 來傳遞數(shù)據(jù)。
可以通過 getDefaultProps() 方法為 props 設置默認值

React組件生命周期

實例化

首次實例化

• ?getDefaultProps
• ?getInitialState
• ?componentWillMount
• ?render
• ?componentDidMount

實例化完成后的更新

• ?getInitialState
• ?componentWillMount
• ?render
• ?componentDidMount

存在期
組件已存在時的狀態(tài)改變

• ?componentWillReceiveProps
• ?shouldComponentUpdate
• ?componentWillUpdate
• ?render
• ?componentDidUpdate

銷毀&清理期

• ?componentWillUnmount

生命周期共提供了10個不同的API。

1.getDefaultProps

作用于組件類，只調(diào)用一次，返回對象用于設置默認的props，對于引用值，會在實例中共享。

2.getInitialState

作用于組件的實例，在實例創(chuàng)建時調(diào)用一次，用于初始化每個實例的state，此時可以訪問this.props。

3.componentWillMount

在完成首次渲染之前調(diào)用，此時仍可以修改組件的state。

4.render

必選的方法，創(chuàng)建虛擬DOM，該方法具有特殊的規(guī)則：

• ?只能通過this.props和this.state訪問數(shù)據(jù)
• ?可以返回null、false或任何React組件
• ?只能出現(xiàn)一個頂級組件（不能返回數(shù)組）
• ?不能改變組件的狀態(tài)
• ?不能修改DOM的輸出

5.componentDidMount

真實的DOM被渲染出來后調(diào)用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
在服務端中，該方法不會被調(diào)用。

6.componentWillReceiveProps

組件接收到新的props時調(diào)用，并將其作為參數(shù)nextProps使用，此時可以更改組件props及state。

    componentWillReceiveProps: function(nextProps) {
        if (nextProps.bool) {
            this.setState({
                bool: true
            });
        }
    }

7.shouldComponentUpdate

組件是否應當渲染新的props或state，返回false表示跳過后續(xù)的生命周期方法，通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應用的瓶頸時，可通過該方法進行適當?shù)膬?yōu)化。
在首次渲染期間或者調(diào)用了forceUpdate方法后，該方法不會被調(diào)用

8.componentWillUpdate

接收到新的props或者state后，進行渲染之前調(diào)用，此時不允許更新props或state。

9.componentDidUpdate

完成渲染新的props或者state后調(diào)用，此時可以訪問到新的DOM元素。

10.componentWillUnmount

組件被移除之前被調(diào)用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如創(chuàng)建的定時器或添加的事件監(jiān)聽器。

生命周期.jpg

總結

到這里，RN 的組件的完整的生命都介紹完了，在回頭來看一下前面的圖，就比較清晰了，把生命周期的回調(diào)函數(shù)總結成如下表格：