這一次總結主要是針對 react 的亮點redux。
在什麼樣的情況下適合使用 react-redux：某個元件的狀態，需要共享。
某個狀態需要在任何地方都可以拿到。
乙個元件需要改變全域性狀態。
乙個元件需要改變另乙個元件的狀態。
redux 是一種架構模式，有三大特性store、actions、reducers，store是儲存資料的地方，整個應用只能有乙個。actions是view發出的通知，監聽state的變化。reducers是乙個純函式，返回新的state。
function createstore(state, statechanger)
return
}複製**
上面subscribe是訂閱者，這樣的訂閱模式，無論你利用dispatch進行修改資料，他都會重新渲染，還有乙個好處就是拿同一塊資料來渲染別的頁面時，dispatch導致的變化也會讓每個頁面都重新渲染。
總結來說就是構建乙個createstore，它可以產生一種我們新定義的資料型別store，通過store.getstate我們獲取共享狀態，而且我們約定只能通過store.dispatch修改共享狀態。store也允許我們通過store.subscribe監聽資料資料狀態被修改了，並且進行後續的例如重新渲染頁面的操作。
共享結構的物件提高效能。
// 渲染函式
console.log('渲染全部')
}// 渲染標題
function rendertitle(title)
// 渲染內容
function rendercontent(content)
store.dispatch();
store.dispatch();
複製**
在上面呼叫時會重新渲染三次，這會有乙個很嚴重的效能問題，我並沒有修改content的東西，也會重新渲染content。
這裡提出的解決方案是，在每個渲染函式執行渲染操作之前先做個判斷，判斷傳入的新資料和舊的資料是不是相同，相同的話就不渲染了。
// 渲染函式
console.log('渲染全部')
}// 渲染標題
function rendertitle(newtitle, oldtitle = {})
// 渲染內容
function rendercontent(newcontent, oldcontent = {})
// 監聽應用狀態修改
function statechanger(state, action)
}case
'update_title_color':
return
}default:
return state
}}// store
function createstore(state, statechanger)
return
}let oldstate = store.getstate(); // 儲存舊狀態
store.subscribe(() => )
store.dispatch();
store.dispatch();
複製**
上面那三個是第一次渲染觸發的，下面那兩次修改重新渲染時並沒有重新渲染content。
reducer
reducer是乙個純函式，它接受兩個引數，乙個是state，乙個是action,它的作用是計算state並且返回乙個新的state，如果沒有傳入值或無法識別action時，會直接返回state。
function themereducer (state, action)
switch (action.type)
case
'upate_theme_color':
return
default:
return state
}}function createstore(reducer)
dispatch({}) // 初始化
return
}複製**
store收到action以後，必須給出乙個新的state，這樣view才會發生變化。這種state的計算過程就叫做reducer。reducer是乙個純函式，它接受action和當前state作為引數，返回乙個新的state。
redux的使用有以下步驟：
// 定乙個 reducer
function reducer (state, action)
// 生成 store
const store = createstore(reducer)
// 監聽資料變化重新渲染頁面
// 首次渲染頁面
// 後面可以隨意 dispatch 了，頁面自動更新
store.dispatch(...)
複製**
Gulp入門個人總結
參考資料 一 安裝 前提條件 已安裝nodejs 所有 綠色帶下劃線均為指令 在命令列下操作 選裝cnpm 受國內網路影響，設在國外的npm伺服器在國內訪問有可能出現異常，所以可選 團隊構建的cnpm來代替npm指令。下文所有npm指令用cnpm代替，如果沒有安裝cnpm則把下文cnmp指令換成np...
Redis操作 入門個人總結
redis操作 入門個人總結 linux下先找到redis cli客戶端 查詢find name redis cli redis入門新手總結 只適合新手入門，都是常用命令以及個人總結 參考文件 個別借鑑csdn 各種大牛xinde redis是一種支援key value等多種資料結構的儲存系統,也是...
react 開發入門
三子棋遊戲 安裝react 建立本地伺服器 啟動執行 直接通過命令安裝 修改測試初始化 刪除src目錄下所有檔案 複製中的index.css和index.js檔案 啟動檢視npm start 增加互動 使用陣列將歷史資料儲存在最上層的game中，可以訪問歷史步驟，如下 import react fr...