React：負(fù)責(zé)組件的UI界面渲染；
Redux：數(shù)據(jù)處理中心；
React-Redux：連接組件和數(shù)據(jù)中心，也就是把React和Redux聯(lián)系起來。
React
React主要就是用來實(shí)現(xiàn)UI界面的，是一個專注與view層的框架。對于一些小項(xiàng)目，如果數(shù)據(jù)的交互不是很多，完全可以只使用React就能很好的實(shí)現(xiàn)。
在傳統(tǒng)的頁面開發(fā)模式中，需要多次的操作DOM來進(jìn)行頁面更新，而DOM操作會造成頁面的性能問題。React可以通過Virtual DOM來減少對DOM的操作來提示性能。
Virtual DOM
當(dāng)有數(shù)據(jù)需要更新時，會先計(jì)算Virtual DOM ，并和上一次的Virtual DOM做對比，只會將需要變化的部分批量的更新到真實(shí)DOM上。
根據(jù)react diff策略：
- Web UI中的DOM節(jié)點(diǎn)跨層級的移動操作特別少，可以忽略不計(jì)（盡量避免）；對樹進(jìn)行分層比較，兩棵樹只會對同一層級的節(jié)點(diǎn)進(jìn)行比較；
- 擁有相同類型的兩個組件將會形成相似的樹形結(jié)構(gòu)，反之亦然；不是同一類型的組件，將替換整個組件下的所有子節(jié)點(diǎn)；
-
對于同一層級的一組子節(jié)點(diǎn)，它們可以通過唯一id進(jìn)行區(qū)分。
React
diff算法流程
React生命周期
redux
Redux是一種架構(gòu)模式，是由flux發(fā)展而來的。
Redux三大原則：
- 唯一數(shù)據(jù)源
- 狀態(tài)制度
- 改變數(shù)據(jù)只能通過純函數(shù)完成
核心api：store，reducer，action
store
Redux的核心是store，它由Redux提供的 createStore(reducer， defaultState) 這個方法生成，生成三個方法，getState(),dispatch(),subscrible()。
- getState()：存儲的數(shù)據(jù)，狀態(tài)樹；
- dispatch(action)：分發(fā)action，并返回一個action，這是唯一能改變store中數(shù)據(jù)的方式；
- subscrible(listener)：注冊一個監(jiān)聽者，store發(fā)生變化的時候被調(diào)用。
reducer
reducer是一個純函數(shù)，它根據(jù)previousState和action計(jì)算出新的state。指定了應(yīng)用狀態(tài)的變化如何響應(yīng)action并發(fā)送到store的。
reducer(previousState,action)
action
action本質(zhì)上是一個JavaScript對象，其中必須包含一個type字段來表示將要執(zhí)行的動作，其他的字段都可以根據(jù)需求來自定義。數(shù)據(jù)的唯一來源，描述了有事情發(fā)生這一事實(shí)。
const ADD_TODO = 'ADD_TODO'
{
type: ADD_TODO,
text: 'Build my first Redux app'
}
React-Redux
Redux 本身和React沒有關(guān)系，只是數(shù)據(jù)處理中心，是React-Redux讓他們聯(lián)系在一起。
React-rRedux提供兩個方法：connect和Provider。
connext
connect連接React組件和Redux store。connect實(shí)際上是一個高階函數(shù)，返回一個新的已與 Redux store 連接的組件類。
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
-
mapStateToProps：從Redux狀態(tài)樹中提取需要的部分作為props傳遞給當(dāng)前的組件。 -
mapDispatchToProps：將需要綁定的響應(yīng)事件（action）作為props傳遞到組件上。
Provider
Provider實(shí)現(xiàn)store的全局訪問，將store傳給每個組件。
