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

資訊專欄INFORMATION COLUMN

do一下來了一個redux

Null / 713人閱讀

摘要：作為一個狀態(tài)樹，來對狀態(tài)進行管理。而對于組件來說，你只要一個就好了。好了，邏輯都明白了，接下來分析下內(nèi)部機制就有基礎(chǔ)了。一探分清一般我們的都是配合使用，但是和只是合作關(guān)系，并沒有血緣關(guān)系。這樣的就相當于通過把和連接起來了。

導(dǎo)語

一開看redux的時候還是比較蒙的，感覺比較繞，但是又好像是那么回事，接觸一個新概念的時候可能都是如此，多去接觸就熟悉了，今天就來分享下redux的三大核心為什么就能如此神奇的施展魔法，干擼完源碼，真的就有種撥開云霧見日出的感覺

開整

我們再來稍微溫習下redux的工作原理。墊吧墊吧，要不然容易暈。redux是為了實現(xiàn)數(shù)據(jù)共享，那么任何一個組件都會得到所有的狀態(tài)，而且組件也不可能只用自己的狀態(tài)，如果組件只用自己自己的狀態(tài)，那么就不需要redux了，一切就如此簡單明了。store作為一個狀態(tài)樹，來對狀態(tài)進行管理。通過它的getState可以對state進行讀操作，action發(fā)布命令對狀態(tài)進行寫（類似于產(chǎn)品提需求）。這是所有組件都要遵守的約定，因為redux讓所有狀態(tài)都共享，所以說，讀可以讓你讀，不嚴格要求，但是寫操作，只能通過action修改state(執(zhí)行相應(yīng)的reducer)，這樣才能保證數(shù)據(jù)的安全性。而對于組件來說，你只要dispatch一個action就好了。就是如此方便。好了，邏輯都明白了，接下來分析下內(nèi)部機制就有基礎(chǔ)了。

一探store
分清state

一般我們的redux都是配合react使用，但是react和redux只是合作關(guān)系，并沒有血緣關(guān)系。因此，自然react中的state也和redux中的state不是一回事了，react中的state是組件內(nèi)部自己的狀態(tài)信息，而redux中的state是redux自己的數(shù)據(jù)。React配合redux使用的時候，react就會拿redux里面的state。既然如此我們在新建一個redux，在redux下目錄結(jié)構(gòu)如下：

首先我們把要共享的數(shù)據(jù)放在state里面

 export const state = {
    head: {
        text: "我是頭部",
        color: "red"
    },
    body: {
        text: "我是body",
        color: "green"
    }
}

這樣我們就把要共享的數(shù)據(jù)設(shè)置好了，待會我們只要把這個文件暴露的接口引入就能使用這里面的數(shù)據(jù)了。

構(gòu)建createStoreAPI

我們?yōu)榱税盐覀儎偛艠?gòu)建的state也放到待會我們要用構(gòu)建的這個createStoreAPI創(chuàng)建的的對象里面去，我們需要這個函數(shù)接受兩個參數(shù)，一個就是我們創(chuàng)建的最初數(shù)據(jù)狀態(tài)，另一個是修改函數(shù)。于是我們的createStorage.js代碼如下：

export const createStore = (state,storeChange) => {
    const store = state || {};
    const dispatch = (action) => {
        storeChange(store,action);
    }
    return { store,dispatch }
}

這段代碼的設(shè)計思想是，當我們在創(chuàng)建一個store對象時，我們可以把后臺提供的原始數(shù)據(jù)放入到store這個對象中，然后再暴露一個dispatch方法來修改state。按照規(guī)則，要修改共享的狀態(tài)，必須通過dispath方法，然后接收一個action，他會調(diào)用reducer函數(shù)來真正執(zhí)行改變。這樣的就相當于通過store把action和reducer連接起來了。一個差不多的createStoreAPI就創(chuàng)建完了

構(gòu)建storeChangeAPI

在createStorage里面，我們已經(jīng)把組件修改state，交給了dispatch(action) ,當我們組件使用修改方法的的時候，就可以dispatch了，為何要dispatch，因為dispatch是寫的一個名詞，分配管理改操作，就像我們要加工資要填申請一樣。那這樣就更加明朗了。毫無疑問，我們的storeChange肯定就是一個reducer函數(shù)了，于是storeChange.js代碼如下：

export const storeChange = (state,action) => {
    switch(action.type) {
        case "HEAD_COLOR":
             state.head.color = action.color
        break;
        case "BODY_TEXT":
            state.body.text = action.text
        break;
        default: 
            return state;
    }
}

工欲善其事，必先利其器。現(xiàn)在要用的武器都打造好了，自然就喲使用起來了，在index.js下代碼如下

import { state } from "./redux/state.js"
import { storeChange } from "./redux/storeChange"
import { createStore } from "./redux/createStorage"

const { store ,dispatch } =createStore(state, storeChange)

function renderHead (state) {
    const head = document.getElementById("head");
    head.innerText = state.text;
    head.color = state.color;

}
function renderBody(state) {
    const head = document.getElementById("body");
    head.innerText = state.text;
    head.color = state.color;

}
function renderApp(state) {
    renderHead(state.head)
    renderBody(state.body)
}
renderApp(store)
dispatch({type: "BODY_TEXY",text: "我是經(jīng)過dispath修改的body"})
renderApp(store)

創(chuàng)建rederAPP函數(shù)分別渲染head和body
當我們需要改變state的時候就dispatch一下action，當我們修改完了，要頁面重新渲染下，頁面就發(fā)生了改變了。這就是一個簡易的redux了
這就是最終的效果：

結(jié)束語

本來想在本文繼續(xù)把context這個大佬請出來的，但是感覺篇幅會很長，而且剛好時間也比較尷尬，所以今天的分享就先到這，context下次分享了。自己并沒有很牛逼，所以分享的東西可能會比較基礎(chǔ)一些，但是我個人感覺挺通俗易懂的。但是編程路上，且行且珍惜，我會慢慢提高我的文章質(zhì)量，分享更多心得。覺得不錯的朋友可以支持一波，謝謝大家。

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

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

相關(guān)文章

  • 實例講解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

  • 一個播放器引發(fā)的思考——談?wù)凴eact跨組件通信

    摘要：如果某個組件訂閱該事件太晚，那發(fā)布者之前所發(fā)布的該類事件，它都接收不到，而方案一和二的優(yōu)點則在于，無論如何，組件都能拿到該的最終狀態(tài)值有存在內(nèi)存泄漏的風險。 原文地址 - 歡迎關(guān)注我的博客 在我們react項目日常開發(fā)中，往往會遇到這樣一個問題：如何去實現(xiàn)跨組件通信？ 為了更好的理解此問題，接下來我們通過一個簡單的栗子說明。 實現(xiàn)一個視頻播放器 假設(shè)有一個這樣的需求，需要我們?nèi)崿F(xiàn)一個...

    Dean 評論0 收藏0

  • 一個播放器引發(fā)的思考——談?wù)凴eact跨組件通信

    摘要：如果某個組件訂閱該事件太晚，那發(fā)布者之前所發(fā)布的該類事件，它都接收不到，而方案一和二的優(yōu)點則在于，無論如何，組件都能拿到該的最終狀態(tài)值有存在內(nèi)存泄漏的風險。 原文地址 - 歡迎關(guān)注我的博客 在我們react項目日常開發(fā)中，往往會遇到這樣一個問題：如何去實現(xiàn)跨組件通信？ 為了更好的理解此問題，接下來我們通過一個簡單的栗子說明。 實現(xiàn)一個視頻播放器 假設(shè)有一個這樣的需求，需要我們?nèi)崿F(xiàn)一個...

    zhongmeizhi 評論0 收藏0

  • 解密Redux: 從源碼開始

    摘要：接下來筆者就從源碼中探尋是如何實現(xiàn)的。其實很簡單，可以簡單理解為一個約束了特定規(guī)則并且包括了一些特殊概念的的發(fā)布訂閱器。新舊中存在的任何都將收到先前的狀態(tài)。這有效地使用來自舊狀態(tài)樹的任何相關(guān)數(shù)據(jù)填充新狀態(tài)樹。 Redux是當今比較流行的狀態(tài)管理庫，它不依賴于任何的框架，并且配合著react-redux的使用，Redux在很多公司的React項目中起到了舉足輕重的作用。接下來筆者就從源碼...

    remcarpediem 評論0 收藏0

發(fā)表評論

0條評論

Null

男|高級講師

TA的文章

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