亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Redux入門0x106: `react`、`vue`、`原生 js`集成`redux`

BetaRabbit / 2601人閱讀

摘要：概述之前寫的所有關(guān)于的文章都是純粹的，是和框架無關(guān)環(huán)境無關(guān)的，所以我沒有將和一起講，為的是吧和分開，作為獨(dú)立的個(gè)體來分析，提現(xiàn)的是一種思想，而不是一個(gè)思維定式。而現(xiàn)在我們可以嘗試在中來使用了。

0x000 概述

之前寫的所有關(guān)于redux的文章都是純粹的redux，是和框架無關(guān)、環(huán)境無關(guān)的redux，所以我沒有將redux和react一起講，為的是吧redux和react分開，作為獨(dú)立的個(gè)體來分析，redux提現(xiàn)的是一種思想，而不是一個(gè)思維定式。而現(xiàn)在我們可以嘗試在react中來使用了。

0x001 react集成redux栗子-counter

源碼

import {createStore} from "redux"
import React from "react"
import ReactDom from "react-dom"

//reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return state + 1
        case ACTION_DECREMENT:
            return state - 1
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

// 組件
class App extends React.Component {
    constructor() {
        super()
        // 初始化 state
        this.state = {
            counter: 0
        }
        // 監(jiān)聽 store 變化, store 變化的時(shí)候更新 counter
        store.subscribe(() => {
            this.setState({
                counter: store.getState()
            })
        })
    }
    // 組件銷毀的時(shí)候取消訂閱
    componentWillUnmount(){
        this.unSub()
    }
    render() {
        return 

            
{this.state.counter}

            
            
        

    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

效果

0x002 原生集成 redux

src/index.html




    React Study




    
0

src/index.js

import {createStore} from "redux"
//reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return state + 1
        case ACTION_DECREMENT:
            return state - 1
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

// 初始化一些 dom 變量
let counterP = document.getElementById("counter")
let incrementBtn = document.getElementById("incrementBtn")
let decrementBtn = document.getElementById("decrementBtn")

// 監(jiān)聽變化, 在 store 變化的時(shí)候修改計(jì)數(shù)器顯示
store.subscribe(() => {
    counterP.innerText = store.getState()
})
// 添加點(diǎn)擊事件, 當(dāng)+被點(diǎn)擊的時(shí)候修改 state
incrementBtn.onclick = () => {
    store.dispatch(increment())
}
// 添加點(diǎn)擊事件, 當(dāng)-被點(diǎn)擊的時(shí)候修改 state
decrementBtn.onclick = () => {
    store.dispatch(decrement())
}

效果和上圖一致

0x003 vue集成redux

源碼：

效果和上圖一致

0x004 總結(jié)

redux是獨(dú)立的，就和react、vue一樣都是獨(dú)立的框架，如何組合他們是我們的選擇，而不是必然和唯一的，要讓框架成為我們的生產(chǎn)力工具，而不是束縛我們的存在。

0x005 資源

源碼

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97932.html

相關(guān)文章

  • Redux入門0x101: 簡介及`redux`簡單實(shí)現(xiàn)

    摘要：在我看來它們的關(guān)系不會(huì)比共用開頭更深了，所以我就重新開了一個(gè)頭，但其實(shí)是基于前面寫的資源中文文檔英文文檔官方視頻學(xué)習(xí)歷程當(dāng)初為了學(xué)習(xí)，看了許多的材料，中途曾經(jīng)放棄兩次，但是最后還是勇敢的拿起了它，現(xiàn)在終于勉強(qiáng)弄懂。 0x000 概述 這一章開始講redux，其實(shí)是承接前面的react，但其實(shí)作為一個(gè)框架來說，redux和react并沒有太多的關(guān)系，本身是獨(dú)立存在的。在我看來它們的關(guān)系不...

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

  • 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤點(diǎn)之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為...

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

  • 前端學(xué)習(xí)資源

    摘要：提供了完整的環(huán)境，并且支持自定義域名指向，動(dòng)態(tài)計(jì)算資源調(diào)整，可以完成各種應(yīng)用的開發(fā)編譯與部署。 react 新特性 react16 Context 算法相關(guān) 圖解排序算法(二)之希爾排序 微信小程序 微信小程序組件化的解決方案移動(dòng)端尺寸基本知識(shí) 瀏覽器 前端必讀：瀏覽器內(nèi)部工作原理瀏覽器緩存原理解讀瀏覽器加載css和js及dom解析之間的關(guān)系瀏覽器緩存 CSS學(xué)習(xí) 移動(dòng)web開發(fā)布局入...

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

  • 從 1 到完美，用 js 和 react-native 寫一個(gè) APP

    摘要：從到完美，用和寫一個(gè)在年開源了后，緊接著在年就又開源了，就此打開了用和前端技術(shù)寫原生之路。對(duì)應(yīng)來看，程序只有兩個(gè)部分，和，而部分則分為組件和。所以，在端的純庫無在中同樣適用，如等。應(yīng)用實(shí)例便是使用開發(fā)的一個(gè)日記。 從 1 到完美，用 js 和 react-native 寫一個(gè) APP facebook 在 2013 年開源了 react 后，緊接著在 2015 年就又開源了 react...

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

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

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

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

0條評(píng)論

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