Component 中 state 和 props 的區別；

元件Component中狀態state和屬性props的區別

程式碼解釋 props

 /**
   * 通過封裝 FlatList 自定義一個列表元件
   */
export default class MyFlatList extends Component {
    constructor(props) {
        super(props);

    }

   ...
    /**
     *象元件FlatList中的
     *ref、ListHeaderComponent、ItemSeparatorComponent、
     *data、keyExtractor、onRefresh、refreshing等都是props屬性；
     *
     * 象這種樣式的定義 this.props.itemSeparator、
     * this.props.onRefresh、this.props.refreshing、this.props.onLoadMore等
     * 屬於自定義元件MyFlatList的屬性，是我們依照FlatList所定義的。
     * 類似象外部開放的介面一樣，就像這裡FlatList使用自己的
     * 屬性ListHeaderComponent、ItemSeparatorComponent、data等一樣來使用；
     * @returns
 
 {XML}
     */
    render() {
        return (<View style={{flex: 1, backgroundColor: Colors.bg}}>
            <FlatList
                ref={(flatlist) => this.flatlist = flatlist}
                ListHeaderComponent={this._header} 
                renderItem={this._renderItem}
                ItemSeparatorComponent={this
 
.props.itemSeparator}
                data={this.props.data}
                keyExtractor={this._keyExtractor}
                onRefresh={this.props.onRefresh}
                refreshing={this.props.refreshing}
                onEndReachedThreshold={0.1}
                onEndReached={this.props.onLoadMore}
                initialNumToRender={3}
                getItemLayout={(data, index) => ({
                length: 250, offset: (250 + 10) * index, index
                })}
            />
        </View>);
    }
}

這是使用MyFlatList，來看下它的這個props

export default class FlatlistScreen extends Component {
 ...
    /**
     *這裡MyFlatList的 itemSeparator、data、onRefresh 、refreshing 、onLoadMore 
     *就是FlatList中使用this.props.xxx來定義的。 
     * @returns {XML}
     */
    render() {
        return (<View style={styles.container}>
           ...
            <MyFlatList
                {...this.props}
                itemSeparator={() => this.separator()}
                data={this.state.dataSource}
                onRefresh = {()=>this.onRefresh()}
                refreshing = {this.state.isRefresh}
                onLoadMore = {()=>this.onLoadMore()}
            />
        </View>);
    }
}

除了以上，如果是對資料內容的props屬性的變化，如上面程式碼的data變化，必然會激發MyFlatList元件生命週期方法componentWillReciveProps回撥，這裡我們可以在render方法回撥前，對資料再次進行判斷處理。
**這就是props屬性功能和作用！！**

程式碼解釋 state

export default class FlatlistScreen extends Component {
    constructor(props) {
        super(props);
        this.unmount = false;
        this.state = ({
            dataSource : [],
            isRefresh: true,
        });
    }
    ...
    /**
     * 功能：使用箭頭函式，不使用bind；因為bind函式每呼叫一次就會建立一個新的函式
     */
    onRefresh() {
        this.setState({
            isRefresh: true,
        });

        //功能：製造重新整理效果
        this.interval = setInterval(() => {
            clearInterval(this.interval);
            //功能：製造上拉載入更多的效果
            const data = [];
            for (let i = 0; i < 8; i++) {
                data.push({id: i, title: '親子旅遊日帶娃兒玩' + i + '折起', state: '已過期', date: '2018/06/0' + (i - 8)},)
            }
            this.setState({
                dataSource: data,
                isRefresh: false,
            });

        }, 2000)
    }

   ...

    render() {
        return (<View style={styles.container}>
           ...
            <MyFlatList
                {...this.props}
                itemSeparator={() => this.separator()}
                data={this.state.dataSource}
                onRefresh = {()=>this.onRefresh()}
                refreshing = {this.state.isRefresh}
                onLoadMore = {()=>this.onLoadMore()}
            />
        </View>);
    }
}

看構造方法這裡

this.state = ({
            dataSource : [],
            isRefresh: true,
        });

這就是state的定義方式。通過改變dataSource、isRefresh的值就能激發render再次渲染元件。
比如這裡的onRefresh方法使用了

 this.setState({
      dataSource: data,
      isRefresh: false,
 });

來控制改變state的時機，來控制組件渲染的時機。
**這就是狀態state的使用！！**

react-native 與 Redux 的配合使用；

在Redux使用中，一些必知的概念

這裡是我基於Redux實現的已給簡單操作流程原始碼
結合原始碼+圖例，分析下redux的執行操作流程，解讀redux是怎樣原理！

登入操作執行圖

現在定位在登入頁面，處於未登入狀態，需要點選登入操作。

圖並結合原始碼分析

登入頁面的部分原始碼，展示了登入頁面的UI

從原始碼中50行看到，點選登入按鈕，則呼叫方法login() ，而login()這個方法是從this.props中解構賦值拿出來的，就是原始碼37行所示。
疑問1？ this.props中的login()是從哪裡來的，怎麼會在this.props中？！
接著看同一js檔案中的程式碼片段

這裡有一個方法非常的重要connect()，她是幹什麼的，這裡可以解答。
簡單的說是，就我們所看到的程式碼從64到74行，connect()裡面有兩個回撥函式，第一個回撥的是state（Login頁面的state），第二回調的是dispatch（Login頁面用來進行分發登入操作的Action）。通過connect()()實現了 回撥函式中 status、isSuc、user 和 login() 他們與當前的元件（登入頁面）的this.props繫結，也就是他們被注入到了this.props中。
所以，點選登入的執行流程是這樣的：
點選登入按鈕——>呼叫this.props中的login方法——>派發登入操作的action ——>.. reducer處理…導致store的state樹中登入元件的state發生變化 … ——>原始碼中65行執行回撥，同時UI將會執行重新的重新整理、渲染——>渲染過程中需要的內容，從回撥中的state中獲取、賦值。

繼續深入…
登入功能的Action中有兩類內容，一是需要傳遞的使用者資料物件

二是派發的Action構建函式

圖中可以清晰看到，Action有兩種實現方式，其中最後一種是非同步的Action構建函式，前面則是同步的Action構建函式；通常非同步的Action中會呼叫同步的Action。而同步的Action有一個特點就是有一個約定成俗的欄位叫type，標識著Action的通知型別。
當執行登入操作，使用redux進行登入操作的action進行派發的時候，呼叫了非同步的Action，非同步的通知由在內部執行非同步操作，呼叫同步的action。執行到這裡，action就會被分發到哪裡呢？？reducer
reducer也分為兩部分，一是登入頁面內容展示登入元件的state

是一個登入操作在執行到reducer時的處理，進行復制、賦值、填充的state模型的資料物件，store樹中的一個物件。
reducer的處理也很簡單，就是根據action的指定處理方式type，進行處理。處理完成之後，返回一個新的state物件。看原始碼是不是這樣的？！

執行處理到這裡，想到你已經發起疑問了。疑問2？總覺得，到reducer處理之後與元件容器那兒回撥，直到頁面再次渲染，沒有什麼關聯？？！它們到底是怎麼建立關係的呢？
當然是通過Redux，以及處理非同步action需要用到的中介軟體（標準的做法是使用 Redux Thunk 中介軟體）。
看這裡，首先是集合管理action的處理，對reducer的管理

然後把對reduer的管理，以及處理結果再交給redux

並且也同時，把上面的兩個reduer對應的處理結果state，作為store樹的分支，繫結到了store中，進行統一管理和處理。而且還有一點很關鍵、很重要！也是急需解決的重要疑問——store樹長什麼樣子？？ 經過我的實踐和測試對比得出結論， store樹 中的登入元件的state，其資料內容的樣子是和上圖中原始碼第10行 rootReduer 中的資料結構LoginIn是對應的。也就是說他們是互相對映的。即， store與rootReduer 在資料結構上是一致的， store樹 就是通過這樣的rootReduer 中一條條 {key:value} 資料拼湊到一起所組成的物件。如果有點疑問，自己可以動手試一試，並用下圖再加深下印象

store樹是用來管理元件state資料的，好，因為我們使用了全域性提供store的方式進行了處理，
store中的屬性，我們可以在專案中進行全域性使用。
所以，在connect()()程式碼塊中，當state發生變化，產生回撥，我們可以通過state.LoginIn.status、state.LoginIn.isSuc、state.LoginIn.user來指定拿到當前元件對應的state資料。而state.LoginIn的呼叫方式就是從store樹中取出LoginIn對應的state，而LoginIn是哪來的？也許內容有點多，蒙圈了，其實就在原先這裡第11行程式碼。

所以，我之前總結的結論，store樹中的登入元件的state，其資料內容的樣子是和上圖中原始碼第10行rootReduer中的資料結構LoginIn是對應的。也就是說他們是互相對映的。 store與rootReduer 在資料結構上是一致的， store樹 就是通過這樣的rootReduer 中一條條 {key:value} 資料拼湊到一起所組成的物件。是正確的！到這裡則回答了上面的疑問2？，同時也解決了Redux的使用以及執行原理。