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

資訊專欄INFORMATION COLUMN

Router入門0x205: react-route + redux + react 集成

yiliang / 1947人閱讀

摘要：概述這一章終于大集成了集成源碼效果說明集成主要是用到庫集成源碼效果說明主要用到庫，是針對庫在環(huán)境下的封裝組件，注入等屬性接管跟組件指定路由和組件的對應(yīng)關(guān)系集成源碼引入相關(guān)的包和鏈接組件效果說明主要用到庫都是用的接

0x000 概述

這一章終于大集成了

0x001 集成react

源碼

import React from "react"
import ReactDom from "react-dom"

class App extends React.Component {
    render() {
        return (
react
)
    }
}

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

效果

說明：

集成react主要是用到react、react-router庫

0X002 集成react-router

源碼

import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Route, withRouter} from "react-router-dom"

class Article extends React.Component {
    render() {
        return (
            
article

        )
    }
}

let MyArticle = withRouter(Article)

class App extends React.Component {
    render() {
        return (

            
        
)
    }
}

let MyApp = withRouter(App)

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

效果

說明

主要用到react-router-dom庫，是針對react-router庫在dom環(huán)境下的封裝

withRouter組件，注入match、location、history等屬性

BrowserRouter接管跟組件

Route指定路由和組件的對應(yīng)關(guān)系

0x003 集成redux

源碼

引入redux相關(guān)的包

import {Provider, connect} from "react-redux"
import {createStore} from "redux"

reducer

const counter = (state = {counter: 0, num: 0}, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return {...state, ...{counter: ++state.counter}}
        case ACTION_DECREMENT:
            return {...state, ...{counter: --state.counter}}
        default:
            return state
    }
}

action和actionCreators

// 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 Article extends React.Component {
    render() {
        return (
            
{this.props.counter}

        )
    }
}

let MyArticle = withRouter(connect((state) => {
    return {
        counter: state.counter
    }
})(Article))

class App extends React.Component {
    render() {
        return (
            

                
                
                
            

        )
    }
}

let MyApp = withRouter(connect(() => ({}), (dispatch) => {
    return {
        increment: () => dispatch(increment()),
        decrement: () => dispatch(decrement())
    }
})(App))

ReactDom.render(
    
        
            
        
    ,

    document.getElementById("app")
)

效果

說明

主要用到redux、react-redux庫

reducer、action、actionCreators都是redux用的

Provider接管BrowserRouter，并注入store

connect連接組件和store，為組件注入reducer

0x005 總結(jié)

每一步都搞懂，下一步才能更明確。

0x006 資源

源碼

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

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

相關(guān)文章

  • 從項目中由淺入深的學(xué)習react (2)

    摘要：序列文章從項目中由淺入深的學(xué)習微信小程序和快應(yīng)用前言從和原生兩個項目來介紹的使用搞懂這兩個項目上手擼代碼篇效果圖項目歡迎技術(shù)棧路由版本狀態(tài)管理組件字體適配方案適配技能點分析技能點對應(yīng)的種定義組件方法函數(shù)式定義的無狀態(tài)組 showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512); 序列文章 從項目中由淺入深的學(xué)習vue,微信小程序...

    leap_frog 評論0 收藏0

  • React 入門實踐

    摘要：更多相關(guān)介紹請看這特點僅僅只是虛擬最大限度減少與的交互類似于使用操作單向數(shù)據(jù)流很大程度減少了重復(fù)代碼的使用組件化可組合一個組件易于和其它組件一起使用，或者嵌套在另一個組件內(nèi)部。在使用后，就變得很容易維護，而且數(shù)據(jù)流非常清晰，容易解決遇到的。 歡迎移步我的博客閱讀：《React 入門實踐》 在寫這篇文章之前，我已經(jīng)接觸 React 有大半年了。在初步學(xué)習 React 之后就正式應(yīng)用到項...

    shenhualong 評論0 收藏0

  • 實例講解react+react-router+redux

    摘要：而函數(shù)式編程就不一樣了，這是模仿我們?nèi)祟惖乃季S方式發(fā)明出來的。數(shù)據(jù)流在中，數(shù)據(jù)的流動是單向的，即從父節(jié)點傳遞到子節(jié)點。數(shù)據(jù)流嚴格的單向數(shù)據(jù)流是架構(gòu)的設(shè)計核心。 前言 總括： 本文采用react+redux+react-router+less+es6+webpack,以實現(xiàn)一個簡易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實現(xiàn)一個完整應(yīng)用的過程。 代碼地址：Re...

    RiverLi 評論0 收藏0

  • React生態(tài)，dva源碼閱讀

    摘要：下面會從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個子頁面對應(yīng)一個文件?？偨Y(jié)上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關(guān)生態(tài)的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯的，大大提升了開發(fā)效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態(tài)管理,以及Redux-saga中...

    bergwhite 評論0 收藏0

  • React生態(tài)，dva源碼閱讀

    摘要：下面會從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個子頁面對應(yīng)一個文件?？偨Y(jié)上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關(guān)生態(tài)的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯的，大大提升了開發(fā)效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態(tài)管理,以及Redux-saga中...

    txgcwm 評論0 收藏0

發(fā)表評論

0條評論

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