React Native的元件

• 什麼是React Native 元件？
• React Native 都有哪些元件？
• 建立元件的三種方式
• [元件的生命週期](https://react.docschina.org/docs/react-component.html)
• 什麼是元件的生命週期?
• 元件的生命週期都包含哪些方法，各有什麼用
• Mounting(裝載)：已插入真實 DOM
• Updating (更新)：正在被重新渲染
• Unmounting(移除)：已移出真實 DOM
• 生命週期的方法都在什麼時候呼叫

什麼是React Native 元件？

React 元件就是讓你將UI分割成獨立的、可重用的一些碎片或部分，這些元件是相互獨立的，開發中一般有UI元件、功能元件等。

React Native 都有哪些元件？

React Native 提供了一些內建的元件，我們在React Native的中文網中可以看到元件的完整列表。當前也提供了一些簡單的分類。
1、基礎元件
2、互動元件
3、列表檢視
4、iOS特有元件
5、Android 獨有元件
6、其他

建立元件的三種方式

1. ES6建立元件的方式

預設匯出（預設推薦）

...
 ...
export default class More extends Component {
    render() {
        return (
            <View style={styles.container}>
          <Text>Hello World</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

 

建立後匯出

 class More extends Component {
    render() {
        return (
            <View style={styles.container}>
          <Text>Hello World</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

module.exports =  More;
 

2. ES5建立元件的方式

var  More = React.createClass {
  render() {
    return (
        <View style={styles.container}>
          <Text >
            Hello World
          </Text>
        </View>
    );
  }
}
module.exports =  More;

3. 函式式定義的無狀態元件(沒有this指標)

function  More (props){
return   <View style={styles.container}><Text >Hello {props.name}</Text> </View>
}
module.exports =  More;

元件的生命週期

什麼是元件的生命週期?

在iOS中UIViewController提供了
(void)viewWillAppear:(BOOL)animated,
(void)viewDidLoad
(void)viewWillDisappear:(BOOL)animated
等生命週期方法，
在Android中Activity則提供了
onCreate(),onStart(),onResume() ,onPause(),onStop(),onDestroy()等生命週期方法，這些生命週期方法展示了一個介面從建立到銷燬的一生。

每一個元件都有幾個你可以重寫以讓程式碼在處理環節的特定時期執行的“生命週期方法”。方法中帶有字首 will 的在特定環節之前被呼叫，而帶有字首 did 的方法則會在特定環節之後被呼叫

元件的生命週期都包含哪些方法，各有什麼用

元件的生命週期分成三個狀態：

Mounting(裝載)：已插入真實 DOM

• getDefaultProps():在元件掛載之前呼叫一次,設定屬性的預設值。
  (es6: static defaultProps)

• getInitialState(): 在元件掛載之前呼叫一次。返回值將會作為 this.state 的初始值。
  (es6: static constructor())

• static getDerivedStateFromProps():元件例項化後和接受新屬性時將會呼叫getDerivedStateFromProps。它應該返回一個物件來更新狀態，或者返回null來表明新屬性不需要更新任何狀態。

  注意，如果父元件導致了元件的重新渲染，即使屬性沒有更新，這一 方法也會被呼叫。如果你只想處理變化，你可能想去比較新舊值。

  呼叫this.setState() 通常不會觸發 getDerivedStateFromProps()

• render(): render()方法是必須的。當被呼叫時，其應該檢查this.props 和 this.state並返回以下型別中的一個:
  React元素。 通常是由 JSX 建立。該元素可能是一個原生DOM元件的表示，如<div/>或者是一個你定義的合成元件。
  字串和數字。 這些將被渲染為 DOM 中的 text node。
  Portals。 由 ReactDOM.createPortal 建立。
  null。 什麼都不渲染。
  布林值。 什麼都不渲染。（通常存在於 return test && 寫法，其中 test 是布林值。）
  當返回null 或 false時，ReactDOM.findDOMNode(this) 將返回 null。

  render()函式應該純淨，意味著其不應該改變元件的狀態，其每次呼叫都應返回相同的結果，同時不直接和瀏覽器互動。若需要和瀏覽器互動，將任務放在componentDidMount()階段或其他的生命週期方法。保持render() 方法純淨使得元件更容易思考。

  若 shouldComponentUpdate()返回false，render()函式將不會被呼叫

• componentWillMount()：伺服器端和客戶端都只調用一次，在初始化渲染執行之前立刻呼叫。

• componentDidMount()：在初始化渲染執行之後立刻呼叫一次，僅客戶端有效（伺服器端不會呼叫）

Updating (更新)：正在被重新渲染

• componentWillReceiveProps(object nextProps) 在元件接收到新的 props 的時候呼叫。在初始化渲染的時候，該方法不會呼叫。

• shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state，將要渲染之前呼叫

• componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之前立刻呼叫

  注意：你不能在該方法中使用 this.setState()。如果需要更新 state 來響應某個 prop 的改變，請使用 componentWillReceiveProps。

• componentDidUpdate(object prevProps, object prevState): 在元件的更新已經同步到 DOM 中之後立刻被呼叫

  該方法不會在初始化渲染的時候呼叫。使用該方法可以在元件更新之後操作 DOM 元素。

Unmounting(移除)：已移出真實 DOM

• componentWillUnmount：在元件從 DOM 中移除的時候立刻被呼叫。
  在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount 中建立的 DOM 元素

生命週期的方法都在什麼時候呼叫