React

React是 DOM 渲染的一個抽象層（view層），React 不僅能通過 ReactDOM 和Web頁面打交道，還能用在服務(wù)器端SSR，移動端ReactNative和桌面端Electron。

web端開發(fā)需要搭配React-dom使用

import?React?from?'react';
import?ReactDOM?from?'react-dom';

const?App?=?()?=>?(
??

??????
Hello?React

??

?)

ReactDom.render(,?document.getElementById('root'));

移動端的ReactNative開發(fā)需要搭配react-native使用

import?React?from?'react';
import?{Text,?View}?from?'react-native';

const?WelcomeScreen?=?()?=>?(
??
??????Hello?ReactNative
??
?);

Redux

主要用來解決組件之間的通信和邏輯處理。是 Web 應(yīng)用是一個狀態(tài)機，用來確保視圖與狀態(tài)是一一對應(yīng)的（即一個 State 對應(yīng)一個 View），用戶發(fā)出 Action，Reducer 函數(shù)算出新的 State，View 重新渲染。

Store

Store是由redux的createStore函數(shù)生成。所有的狀態(tài)，保存在對象Store里面，整個應(yīng)用只有唯一一個Store。

import?{?createStore}?from?'redux'
const?store?=?createStore()

State

State是Redux對 Store 生成快照。

const?state?=?store.getState()

Action

用戶通過View層的交互操作發(fā)出Action從而導(dǎo)致State變化。

創(chuàng)建Action

const?ADD_TODO?=?'ADD_TODO'

function?addTodo(text)?{
??return?{
????type:?ADD_TODO,
????text
??}
}

const?action?=?addTodo('Learn?Redux')

發(fā)送Action

import?{?createStore?}?from?'redux'
const?store?=?createStore(fn)

store.dispatch({
??type:?'ADD_TODO',
??payload:?'Learn?Redux'
})

Reducer

用戶發(fā)出 Action 后，reducer會對新產(chǎn)生的 State的進行一個計算。store.dispatch方法會觸發(fā) Reducer 的自動執(zhí)行，因此需要在生成 Store 的時候，將 Reducer 傳入createStore方法。

const?store?=?createStore(reducer)

Redux 提供的combineReducers方法，可以將各個子 Reducer 函數(shù)合成一個大的 Reducer。

import?{?combineReducers?}?from?'redux';

const?totalReducer?=?combineReducers({
??fuc1,
??fuc2,
??fuc3
})

export?default?totalReducer

綜上，redux工作原理如下：

Redux中間件

Action 發(fā)出以后，Reducer 立即算出 State，是同步；過一段時間再執(zhí)行 Reducer，是異步。中間件能使 Reducer 在異步操作結(jié)束后自動執(zhí)行。中間件本質(zhì)是一個函數(shù)，是在action發(fā)出和reducer計算之前觸發(fā)的功能回調(diào)。

中間件的使用

將中間件傳入applyMiddleware函數(shù)，將applyMiddleware傳入createStore函數(shù)，就完成了store.dispatch()的功能增強。

import?thunk?from?'redux-thunk'
const?store?=?createStore(reducer,?applyMiddleware(thunk))

react-redux

react-redux是 redux一個封裝庫，react-redux將組件分為容器組件和UI組件。UI組件負責(zé)純粹的視圖渲染，容器組件包含數(shù)據(jù)處理等邏輯操作。

connect() 函數(shù)負責(zé)將UI組件映射成容器組件

import?{?connect?}?from?'react-redux'

const?mapStateToProps?=?state?=>?({
???Data1:?state.Data1,
???Data2:?state.Data2
});

const?mapDispatchToProps?=?dispatch?=>?({
???dispatch,
???actions:?bindActionCreators(
???????{
???????????fetchGetData1,
???????????fetchGetData2
???????},
???????dispatch
???)
});

const?VisibleTodoList?=?connect(
?mapStateToProps,
?mapDispatchToProps
)(App)

mapStateToProps負責(zé)向UI組件傳入組件邏輯，將UI組件的state映射到props

mapDispatchToProps負責(zé)將用戶的交互操作映射為action

Provider組件負責(zé)傳入store對象

connect方法生成容器組件以后，需要讓容器組件拿到state對象，才能生成 UI 組件的參數(shù)，Provider組件可以讓容器組件拿到state。

??????

上邊提供的demo表明Provider在根組件外面包了一層，使App的所有子組件都可以拿到state

react-router-dom

react-router-dom和react-router二者可選其一，其中react-router-dom比react-router多出???這樣的 DOM 類組件。

????'/gep/view/auth/404'?component={}?/>????????