本篇文章主要說明redux的基本原理以及如何使用
高階元件
觀察者模式
react基礎
wepy基礎(有vue基礎也可以)
簡單的說，context就是乙個全域性變數，它可以被乙個高階元件及該高階元件的所有子元件，孫組建等等共享
舉個例子，下圖是乙個react頁面
由上面三圖可以看出，本應一層一層傳遞的資料，在使用context後，變得方便了。
高階元件以下的所有子元件都可以直接從context中獲取資料。
這看似方便的方法，實際上引發了乙個老生常談的問題，即全域性變數控制問題
context 裡面的資料能被隨意接觸就能被隨意修改，每個元件都能夠改 context 裡面的內容會導致程式的執行不可預料
同時context的出現也打破了元件和元件之間通過 props 傳遞資料的規範，極大地增強了元件之間的耦合性。
試想，若是所有元件都可以通過***='***'來修改狀態，我們獲取並控制當前狀態的難度是否變大？
在大型複雜專案中，我們可能都無法確定某資料是如何變成當前值的
為了避免這種情況出現，redux就出現了
為了解決模組（元件）之間需要共享資料和資料可能被任意修改導致不可預料的結果時間的矛盾，
redux團隊想出了乙個辦法，即把事情搞複雜一些，提高資料修改的門檻：模組（元件）之間可以共享資料，也可以改資料。但是我們約定，這個資料並不能直接改，你只能執行某些我允許的某些修改，而且你修改的必須大張旗鼓地告訴我。
所以，修改資料的函式dispatch出現了
function dispatch (action)
}
dispatch() // 修改標題文字
dispatch() // 修改標題顏色
*state 初始狀態
*statechanger 乙個修改state的函式
*/function createstore (state, statechanger)
}
function createstore (state, statechanger)
return }}
function rendertitle (title)
function rendercontent (content)
title: ,
content:
}function statechanger (state, action)
}store.dispatch() // 修改標題文字
store.dispatch() // 修改標題顏色
function rendertitle (newtitle, oldtitle = {})
function rendercontent (newcontent, oldcontent = {})
這樣就可以提高效能了吧，每次只重新整理需要重新整理部分啦~~
才怪！
我們確實修改了物件內的屬性值，但是newstate和oldstate所指的不還是乙個物件嗎？
所以為了進行判斷，我們還要修改前面的statechanger函式
function statechanger (state, action)
}case 'update_title_color':
return
}default:
return state // 沒有修改，返回原來的物件
}}
為了讓程式的結構更加清晰，我們把原始state放入statechanger中，並把statechanger改名為reducer
function reducer (state, action) ,
content:
}} switch (action.type)
}case 'update_title_color':
return
}default:
return state
}}
make-redux
redux教程（一） 理解redux
react的頁面應用越來越複雜，資料和狀態的管理也越來越複雜，甚至夾雜著ajax非同步請求對資料狀態的變更。不知從什麼時候開始 react框架的資料狀態的管理已經越來越難以控制和 redux就是針對難以處理的資料管理，提出的一種解決方案。它能夠讓你的頁面的資料管理更輕鬆。當問到為什麼要使用redux...
redux簡要理解
connect將props dispatch連線到元件上。provider基於store.subscribe 封裝，如果store發生變化，會自動更新store,觸發重渲染。如果不寫provider，需要手動監聽 更新render。index.js store.subscribe function ...
redux 初步理解
派發乙個 action 給 reducer,reducer 生成了乙個新的 state redux 通過 store 來儲存資料,store.getstate 獲得資料,而要更新 state,則需要 store.dispatch action 由於reducer 裡才會生成乙個新的 state,所以...