成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

yiliang / 1948人閱讀

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

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")
)

效果

說(shuō)明：

集成react主要是用到react、react-router庫(kù)

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")
)

效果

說(shuō)明

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

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

BrowserRouter接管跟組件

Route指定路由和組件的對(duì)應(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")
)

效果

說(shuō)明

主要用到redux、react-redux庫(kù)

reducer、action、actionCreators都是redux用的

Provider接管BrowserRouter，并注入store

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

0x005 總結(jié)

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

0x006 資源

源碼

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

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

相關(guān)文章

  • 從項(xiàng)目中由淺入深的學(xué)習(xí)react (2)

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

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

  • React 入門實(shí)踐

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

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

  • 實(shí)例講解react+react-router+redux

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

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

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

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<