成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React與Redux整合技術(shù)簡介

idealcn / 3114人閱讀

摘要：展示組件與容器組件的綁定庫的基本開發(fā)思想是展示組件與容器組件相分離。技術(shù)上講，容器組件就是使用從樹中讀取部分?jǐn)?shù)據(jù)，并通過來把這些數(shù)據(jù)提供給要渲染的組件。

說明：閱讀本篇文章需要對Redux有一定的了解，對Redux不了解的同學(xué)可先看看這篇文章Redux技術(shù)架構(gòu)簡介（一）

1. React中引入react-redux

為了讓Redux和React更好的配合，F(xiàn)acebook專門開發(fā)了一個npm包--react-redux，可以這樣引入你的項(xiàng)目：
npm install --save react-redux
當(dāng)然不引用也完全可以（Redux包是必須要引用的），只不過會增加一些開發(fā)量，還會帶來一些額外的性能開銷。

2. 展示組件與容器組件

Redux的React綁定庫的基本開發(fā)思想是展示組件與容器組件相分離。展示組件只負(fù)責(zé)頁面呈現(xiàn)，不處理數(shù)據(jù)，不維護(hù)狀態(tài)；容器組件負(fù)責(zé)頁面的運(yùn)行邏輯，獲取展示組件中的消息，處理內(nèi)部數(shù)據(jù)，更新狀態(tài)等。

3. 展示組件的實(shí)現(xiàn)

React引入redux后，應(yīng)用中只有單一的state樹，react的每個組件都可以拋棄state的相關(guān)邏輯，改為從props獲取，包括要執(zhí)行的一些用戶事件行為。
引入redux后的react組件變?yōu)椋?/p> 

class MainContent extends React.Component{
    constructor(props){
        super(props);
        this.sortResult = this.sortResult.bind(this);
        this.showSlider = this.showSlider.bind(this);
    }
    sortResult(data){
        this.props.setPhoto(data);
    }
    showSlider(index){
        this.props.showSlider(index);
    }
    componentDidMount () {
        this.props.fetchPosts();
    }
    render(){
        let {isFetching, isValidate} = this.props;
        let sliderNode = null;
        if(this.props.photo.length){
            sliderNode = ;
        }
        return (
            
   
                

                
                
                {sliderNode}
            

        );
    }
};

可以看到，MainContent組件除了展示外，幾乎沒有任何的邏輯處理（subscribe和dispatch的邏輯都放到了容器組件），所有的數(shù)據(jù)都是通過this.props從父組件中獲取。

4. 容器組件的實(shí)現(xiàn)

容器組件實(shí)現(xiàn)了將展示組件和redux關(guān)聯(lián)在一起。技術(shù)上講，容器組件就是使用 store.subscribe() 從 Redux state 樹中讀取部分?jǐn)?shù)據(jù)，并通過 props 來把這些數(shù)據(jù)提供給要渲染的組件。建議每個展示組件對應(yīng)一個容器組件，這樣可以很清晰的找到映射關(guān)系。

mapStateToProps函數(shù)

從名字上可以看出，這個函數(shù)實(shí)現(xiàn)了從state（reducer中定義的）到展示組件props 的映射。示例代碼如下：

const mapStateToProps = (state, ownProps) => {
    return {
        photo : state.photomainReducer.photoData,
        video : state.photomainReducer.videoData,
        isFetching : state.photomainReducer.isFetching,
        isValidate : state.photomainReducer.isValidate
    }
}

傳入的state是應(yīng)用中唯一的狀態(tài)樹，我們從相應(yīng)組件的reducer中讀取state，分別映射到一個自定義屬性中，這樣就可以在展示組件中直接調(diào)用對應(yīng)屬性（props）了。
mapStateToProps會訂閱 Store，每當(dāng)state更新的時候，就會自動執(zhí)行，重新計(jì)算 UI 組件的參數(shù)，從而觸發(fā) UI 組件的重新渲染。

mapDispatchToProps函數(shù)

同樣我們也可以猜到，這個函數(shù)的作用是將期望執(zhí)行的dispatch方法的返回值映射到展示組件的props上。示例代碼如下：

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        slider:(data) => dispatch(photomainAction.showSlider(data))
    }
}

比如我們想dispatch一個showSlider的action，通過這個方法映射之后，就可以直接這樣寫：

this.props.slider(data)

即mapDispatchToProps封裝了dispatch方法。此外，還可以通過redux提供的bindActionCreators函數(shù)進(jìn)一步封裝，上面的代碼可以改寫如下：

const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({
        slider:photomainAction.showSlider
    },dispatch);
}

如果import時的action名和你想定義的屬性名一樣，甚至還可以簡化：

const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({slider},dispatch);
}
connect函數(shù)

上面2個方法實(shí)現(xiàn)了state和action到props的映射，我們還需要把這2個函數(shù)連接在一起，并且要關(guān)聯(lián)到一個具體的展示組件，這樣就可以在展示組件中使用這種映射關(guān)系了。示例代碼如下：

const PhotomainContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Photomain);

其中，Photomain是一個展示組件。
每一個容器組件都包含一個對應(yīng)的展示組件，我們可以把這些容器組件當(dāng)做一個普通的react組件進(jìn)行組合，整合的最后一步就是如何把store傳入到每個組件中。

5. 傳入Store

Store保存了整個應(yīng)用的單一狀態(tài)樹，所有容器組件都需要從store中讀取，我們可以store作為屬性傳遞給每個組件，子組件通過props獲取，但是如果嵌套過深，寫起來會很麻煩。還好，react-redux提供一個叫provider的組件，他可以讓所有組件都可以訪問到store（他的實(shí)現(xiàn)原理實(shí)際上是利用了react的context功能），而不必顯示的一層層傳遞了。

ReactDOM.render(
    
        
    ,
    $(".main-wrap")[0]
);

有一點(diǎn)要注意，provider內(nèi)的組件只能有一個，所以需要將所有組件先封裝成一個組件再用provider包裹起來。

6. 總結(jié)

Redux的引入使React徹底脫離了對數(shù)據(jù)狀態(tài)的管理，可以讓React更專注于View的展現(xiàn)，實(shí)際上這也是react善于做的事情。多帶帶看react，我們甚至感覺不到redux的存在，使邏輯層和視圖層更加清晰（redux負(fù)責(zé)邏輯，react負(fù)責(zé)視圖），當(dāng)然一部分原因要?dú)w功于react-redux包做了很好的封裝。

以上就是React與Redux整合的簡單實(shí)現(xiàn)。

參考

Redux 中文文檔
Redux 入門教程-阮一峰

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95077.html

相關(guān)文章

  • Redux概念之一: Redux簡介

    摘要：應(yīng)用這說明并不是單指設(shè)計(jì)給用的，它是獨(dú)立的一個函數(shù)庫，可通用于各種應(yīng)用。在數(shù)據(jù)流的最后，要觸發(fā)最上層組件的，然后進(jìn)行整體的重新渲染工作。單純在的對象上是沒有辦法使用，要靠額外的函數(shù)庫才能這樣作，這是一定要使用類似像這種函數(shù)庫的主要原因。 Redux的官網(wǎng)中用一句話來說明Redux是什么: Redux是針對JavaScript應(yīng)用的可預(yù)測狀態(tài)容器 這句話雖然簡短，其實(shí)是有幾個涵義的: ...

    cjie 評論0 收藏0

  • Redux技術(shù)架構(gòu)簡介（二）-- 異步實(shí)現(xiàn)

    摘要：異步實(shí)現(xiàn)設(shè)計(jì)需要增加三種通知異步請求發(fā)起的異步請求成功的異步請求失敗的示例代碼如下返回參數(shù)完全可以自定義。這種分別在請求開始前，請求成功后，請求失敗后發(fā)送。表示數(shù)據(jù)的有效性，他的作用是在異步請求發(fā)送失敗后，告訴當(dāng)前的數(shù)據(jù)是過時的數(shù)據(jù)。 說明：對Redux不了解的同學(xué)可先看看這篇文章Redux技術(shù)架構(gòu)簡介（一） 前言 這里說的Redux異步實(shí)現(xiàn)，是專指Redux中的異步Action實(shí)現(xiàn)，...

    wuaiqiu 評論0 收藏0

  • 【全棧React】React 30天教程索引

    摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復(fù)雜數(shù)據(jù)的方法，稱為體系結(jié)構(gòu)。第天部署介紹今天，我們將探討部署我們的應(yīng)用所涉及的不同部分，以便外界可以使用我們的應(yīng)用。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

    appetizerio 評論0 收藏0

  • Redux技術(shù)架構(gòu)簡介

    摘要：是一個程序架構(gòu)，源于提出的一種架構(gòu)，然而，它不僅可以應(yīng)用于，還可以應(yīng)用于其他任何框架中。有以下職責(zé)維持應(yīng)用的提供方法獲取提供方法更新通過注冊監(jiān)聽器通過返回的函數(shù)注銷監(jiān)聽器。同時，的返回值實(shí)際上是一個函數(shù)可以解除監(jiān)聽。 Redux是一個程序架構(gòu)，源于Flux（Facebook提出的一種架構(gòu)），然而，它不僅可以應(yīng)用于React，還可以應(yīng)用于其他任何框架中。值得一提的是，Redux的源代碼很...

    weizx 評論0 收藏0

  • Taro 簡介

    摘要：讓人又愛又恨的微信小程序自微信小程序以下簡稱小程序誕生以來，就伴隨著贊譽(yù)與爭議不斷。同時于開發(fā)者來說，小程序的生態(tài)不斷在完善，許多的坑已被踩平，雖然還是存在一些令人詬病的問題，但已經(jīng)足見微信的誠意了。 Taro 介紹 在互聯(lián)網(wǎng)不斷發(fā)展的今天，前端程序員們也不斷面臨著新的挑戰(zhàn)，在這個變化多端、不斷革新自己的領(lǐng)域，每一年都有新的美好事物在發(fā)生。從去年微信小程序的誕生，到今年的逐漸火熱，以及...

    sixgo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<