国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[ 一起學(xué)React系列 -- 7 ] 秘術(shù)之時(shí)間旅行-2

nidaye / 1425人閱讀

摘要：但這樣做的缺點(diǎn)很多，不利于狀態(tài)在組件之間共享。所以本篇使用作為狀態(tài)管理器來(lái)實(shí)現(xiàn)時(shí)間旅行。并且從中可以看出過(guò)程不僅僅向?qū)ο笾刑砑右粋€(gè)狀態(tài)對(duì)象，還對(duì)進(jìn)行了加一操作，這是為了保證狀態(tài)與保持同步。

距離上一次更新已經(jīng)有半個(gè)月了，這半個(gè)月來(lái)主要在忙兩件事：一個(gè)是最近老板給了個(gè)自動(dòng)化測(cè)試任務(wù)，另一個(gè)是和學(xué)校的弟弟一起搞一個(gè)微信小游戲...emmmm！其實(shí)主要是懶?。?！

本篇是作為上篇的續(xù)集，不知道看過(guò)上篇的小伙伴對(duì)筆者改造過(guò)的時(shí)間旅行實(shí)現(xiàn)方案有沒(méi)有什么意見(jiàn)或者建議！當(dāng)然本篇仍然搞時(shí)間旅行、仍然使用上篇的實(shí)現(xiàn)方案，還是原來(lái)的味道！??！
不過(guò)上篇實(shí)現(xiàn)時(shí)間旅行的狀態(tài)管理方案是...額，沒(méi)有任何方案，只是由組件自己管理的。但這樣做的缺點(diǎn)很多，不利于狀態(tài)在組件之間共享。畢竟只能自己玩的組件不是好組件。所以本篇使用Redux作為狀態(tài)管理器來(lái)實(shí)現(xiàn)時(shí)間旅行。
具體的時(shí)間旅行實(shí)現(xiàn)方案和代碼已經(jīng)在上篇提供了，所以本篇著眼于基于Redux實(shí)現(xiàn)時(shí)間旅行過(guò)程中需要注意的點(diǎn)。

基于Redux的時(shí)間旅行解決方案 在React中使用Redux

此處省略1萬(wàn)字...因?yàn)檫@種教程簡(jiǎn)直多得不行，如果再糾結(jié)可能就多余了！

Redux之狀態(tài)對(duì)象

因?yàn)閷?shí)現(xiàn)方案不變，所以保存在Redux中的狀態(tài)對(duì)象仍然是狀態(tài)位置currentIndex和狀態(tài)集list。

Redux之Action

對(duì)上一篇有過(guò)了解的朋友知道在整個(gè)過(guò)程中主要涉及到三個(gè)操作：添加、撤銷、返回，當(dāng)然真實(shí)情況下肯定還有別的操作不過(guò)此地不做更多討論，萬(wàn)變不離其宗。所以對(duì)于的Action應(yīng)該有三個(gè)

export function Add(list) {
    return {
        type: ADD,
        payload: {"list": list}
    }
}

export function Undo() {
    return {
        type: UNDO,
    }
}

export function Redo() {
    return {
        type: REDO,
    }
}

對(duì)于同一功能的Action，我們使用type作為區(qū)分標(biāo)志，因此就有ADD(添加)、UNDO(撤銷)、REDO(返回)。因?yàn)樘砑由婕暗綘顟B(tài)對(duì)象所以action的payload為所需要添加的狀態(tài)對(duì)象、撤銷和返回控制currentIndex的加減，所以只需要確定type然后具體的加減操作在Reducer中完成。

Redux之Reducer

先看Reducer代碼：

export default function TravelReducer(state = {}, action) {
    switch (action.type) {
        case ADD:
            let payloadContent = action.payload["list"];
            let archive = state["list"].slice();
            let currentIndex_ADD = state["currentIndex"];
            archive.push(payloadContent);
            return {...state, ...{"list": archive, "currentIndex": currentIndex_ADD + 1}};
        case UNDO:
            let currentIndex_UNDO = state["currentIndex"];
            return {...state, ...{"currentIndex": currentIndex_UNDO - 1}};
        case REDO:
            let currentIndex_REDO = state["currentIndex"];
            return {...state, ...{"currentIndex": currentIndex_REDO + 1}};
        default:
            return state
    }
}

Reducer處理的type要與Action的type相對(duì)應(yīng)。并且從中可以看出ADD過(guò)程不僅僅向list對(duì)象中添加一個(gè)狀態(tài)對(duì)象，還對(duì)currentIndex進(jìn)行了加一操作，這是為了保證current狀態(tài)與currentIndex保持同步。而UNDO與REDO就相對(duì)比較簡(jiǎn)單，僅僅是加一或者減一操作，目的也是保證current狀態(tài)與currentIndex保持同步。

以上就是本次更新的主要內(nèi)容，篇幅比較小，主要是對(duì)上一篇的補(bǔ)充和擴(kuò)展。在這再給一下實(shí)例代碼的地址，有興趣的朋友可以下載下來(lái)本地運(yùn)行、學(xué)習(xí)。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98348.html

相關(guān)文章

  • [ 一起學(xué)React系列 -- 6 ] 秘術(shù)之時(shí)間旅行-1

    摘要：所謂的時(shí)間旅行從廣義上來(lái)說(shuō)無(wú)非就是三個(gè)動(dòng)作回到過(guò)去進(jìn)入未來(lái)回到現(xiàn)在，這個(gè)無(wú)論是從現(xiàn)實(shí)還是前端技術(shù)來(lái)說(shuō)都是可靠的。單從技術(shù)棧來(lái)說(shuō)，時(shí)間旅行不是一門技術(shù)而是一個(gè)思想套路。 標(biāo)題看起來(lái)挺新穎的，筆者都覺(jué)得很高大上是不是哈哈... 拋轉(zhuǎn) 時(shí)間旅行在生活中是一個(gè)非常吸引人的概念，雖然現(xiàn)在無(wú)法實(shí)現(xiàn)但說(shuō)不定未來(lái)的某天就實(shí)現(xiàn)了！然后就穿梭會(huì)過(guò)去殺掉小時(shí)候的自己然后就開(kāi)始懵逼自己是誰(shuí)類似的狗血?jiǎng)∏?.....

    付倫 評(píng)論0 收藏0

  • 寫(xiě)給初入門/半路出家的前端er

    摘要：半路出家的前端程序員應(yīng)該不在少數(shù)，我也是其中之一。年，馮馮同事兼師兄看我寫(xiě)太費(fèi)勁，跟我說(shuō)對(duì)面樓在找，問(wèn)我要不要學(xué)，說(shuō)出來(lái)可能有點(diǎn)丟人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序員應(yīng)該不在少數(shù)，我也是其中之一。 為何會(huì)走向前端 非計(jì)算機(jī)專業(yè)的我，畢業(yè)之后，就職于一家電力行業(yè)公司，做過(guò)設(shè)備調(diào)試、部門助理、測(cè)試，也寫(xiě)過(guò)一段時(shí)間的QT，那三年的時(shí)間，最難過(guò)的不是工作忙不忙，...

    Cc_2011 評(píng)論0 收藏0

  • 分享國(guó)外Python大咖如何在5個(gè)月內(nèi)找到一份薪水翻番的工作的？

    摘要：六個(gè)月前，我辭掉了初級(jí)開(kāi)發(fā)者的工作，并去東南亞旅行了五個(gè)月。我的目標(biāo)了解更多資料我原本計(jì)劃去東南亞旅行個(gè)月，我也有信心在旅行回來(lái)后能夠找到一份更好的工作。申請(qǐng)工作我下一站旅行地是老撾境內(nèi)一個(gè)偏遠(yuǎn)的攀爬區(qū)。 金三銀四，謹(jǐn)以此文獻(xiàn)給所有正在準(zhǔn)備跳槽的你。 showImg(https://segmentfault.com/img/bVbhXVQ?w=640&h=640);六個(gè)月前，我辭掉了初...

    Anleb 評(píng)論0 收藏0

  • [ 一起學(xué)React系列 -- 2 ] UI的靈魂--State

    摘要：首先賣個(gè)關(guān)子，下面我們一起來(lái)復(fù)習(xí)下小學(xué)還是初中的一枚數(shù)學(xué)知識(shí)。一旦更改了，會(huì)觸發(fā)組件的重新渲染。為了頁(yè)面渲染性能的考慮，有助于在中進(jìn)行比較并確定是否重新渲染。 概念引入 對(duì)于React來(lái)說(shuō), 沒(méi)有State就沒(méi)有頁(yè)面的渲染, 我們也將什么都看不到 咋一聽(tīng)怎么那么唬人？不過(guò)的確是這樣，正如標(biāo)題所言State是UI的靈魂。我們都知道React的核心思想之一是組件化，將頁(yè)面所展示的東西按一定...

    XBaron 評(píng)論0 收藏0

  • [ 一起學(xué)React系列 -- 0 ] React技術(shù)棧學(xué)習(xí)路線

    摘要：的出現(xiàn)真可謂是前端界的福音，正與之宗旨所說(shuō)，。據(jù)統(tǒng)計(jì)，目前世界上有的項(xiàng)目使用了。技術(shù)棧學(xué)習(xí)路線直到前段時(shí)間筆者的朋友給推薦了一個(gè)，真是欣喜若狂也更加堅(jiān)定了自己在繼續(xù)前進(jìn)的想法。這是一個(gè)外國(guó)友人總結(jié)的一套技術(shù)棧學(xué)習(xí)路線，先給傳送門。 我相信點(diǎn)進(jìn)來(lái)的同學(xué)都是沖著標(biāo)題來(lái)的，當(dāng)然本文也不會(huì)讓各位失望。不過(guò)在正式介紹標(biāo)題所述的內(nèi)容之前，我們不妨先放下技術(shù)，一起回顧下自己做前端技術(shù)的心路歷程。 前...

    Java3y 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<