React】歸納篇（十）元件間通訊方式之Redux | UI元件AntDesign | Redux-react
react-router4
react-router概覽
- 1、react的一個外掛庫
- 2、專門用於實現一個SPA應用
- 3、基於react的專案都會用到該庫
SPA
- 1、點選頁面中的連結不會重新整理頁面，本身也不會向伺服器傳送請求
- 2、點選路由連結時，只會發生頁面區域性更新
- 3、資料通過ajax請求，在前端非同步展示
- 4、整個應用只有一個完整頁面，該頁面由各種元件構成
路由
- 路由時一個對映關係（key:value）
router.get(path,function(rep,res))註冊路由 - key為路由路徑，value是function或component
分類
- 後臺路由：node伺服器端路由，value是function，用於處理客戶端提交的請求並返回一個響應資料
- 前臺路由：瀏覽器端路由，value是component，當請求的是路由path時，瀏覽器端沒有傳送http請求，但介面會發生區域性更新
後臺路由
- 註冊路由：
router.get(path,function(req,res){}) - 當node接收到一個請求時，依據請求路徑找到匹配的路由，呼叫路由中的函式來處理請求，返回響應資料
前臺路由
- 註冊路由：
- 當瀏覽器的hash變為#about時，當前路由元件就會變為About元件
前端路由的實現方式
- history庫 https://github.com/ReactTraining/history 管理瀏覽器會話歷史的工具庫 包裝的是原生BOM中window.history和window.location.hash
let history = History.createBrowserHistory();
//let history = History.createHashHistory();//H5中寫法，使用錨點方法記錄雜湊值
history.push(param) //設定
history.goBack() //回退
history.goForward() //前進
histroy.replace(param) //替換
history.listen((location)=>{})
React-router的使用
###相關API
1、元件
- <BrowserRouter> - <HashRouter> - <Router> - <Redirect> - <Link> - <NavLink> - <Switch> //切換
2、其他
- history物件
- match物件
- withRouter函式
3、使用
先安裝
npm install --save react-router-dom //web版本
路由元件view與非路由元件components
使用路由元件的時候： 連結換成導航路由連結。
元件要用路由元件包裹。
路由巢狀-路由元件的路由
思考：如何編寫路由效果？
-
1、編寫路由元件
-
2、在父路由元件中指定2個標籤：
- 路由連結
<NavLink> or < Link> - 路由
<Route>
- 路由連結
向路由元件傳遞資料
通過路由連結傳遞資料，在路徑中插入佔位符（引數）
2種路由跳轉的方式
用js方式，非標籤方式：
- push()方式，預設方式
- replace()方式
this.props.history.push/replace/goBack/goForward
this.props.match
開源UI元件庫
- material-UI(
www.material-ui.com) - and-design PC(
ant.design/index-cn) mobile(mobile.ant.design/index-cn)
antD
如何按需打包需要的樣式：
antD 把每個元件做成資料夾：
方式1：
babel-plugin-import外掛，只加載有import 的元件。
先下載babel-plugin-import。然後寫一個配置檔案：.babelrc
方式2：（推薦）
在create-react-app下完成。
npm install react-app-rewired --save-dev
npm install babel-plugin-import --save-dev
redux （難點）
- 語法套路深
概覽
- redux 是一個獨立專門用於做狀態管理的JS庫，不是React外掛庫
- 它可以用在react,angular,vue等專案中，但基本與react配合使用
- 作用：集中式管理react應用中多個元件共享的狀態。
- Store : 核心，管理物件 內部維護： state、 reducer 核心方法： getState()獲取狀態；dispatch(action)分發事件，會觸發Reducers呼叫；subscribe(listener)釋出，重新渲染元件；
action：
- 標識要執行行為的物件
- 包含2個方面的屬性
type: 表示屬性，值為字串，唯一，必要屬性
xxx:資料屬性，值型別任意，可選屬性
eg:
Action Creator(建立Action的工廠函式)const action = { type:'INCREMENT', data:2 }const increment = (number)=>({type:'INCREMENT',data:number})
reducer
- 根據老的State和action，產生新的state的純函式
export default function counter(state=0,action){
switch(action.type){
case 'INCREMENT':
return state + action.data
case 'DECREMENT':
return state - action.data
default:
return state
}
}
注意：
- 返回的是一個新的狀態；
- 不要修改原來的狀態；
store物件
- 將state,action與reducer聯絡在一起的物件
- 如何得到此物件？
import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
此物件的功能？
getState(): 得到state dispatch(action): 分發action,觸發reducer呼叫，產生新的state subscribe(listener): 註冊監聽，當產生新的state時，自動呼叫
- React Components : 通過Store讀取狀態並顯示；更新狀態；
- dispatch(action):分發（觸發）事件 type、data （事件機制）
- Reducers(oldState,action){return newState} 舊狀態返回新狀態
- Action Creators 工廠函式 ,生產action函式，用type標識函式型別。
什麼情況需要redux:
- 某個元件的狀態，需要共享
- 某個狀態需要在任何地方都可以拿到
- 一個元件需要改變全域性狀態
- 一個元件需要改變另一個元件的狀態
使用
一個規定的套路。需要多寫幾遍。
- react-redux
1、一個react外掛庫 2、專門用於簡化react應用中使用redux
使用redux先寫好結構：
- 在src中新建redux和containers資料夾
- 在redux資料夾下寫好如下檔名：
使用Provider元件對dispatch、subscribe、getState…進行全域性管理
React-Redux 將所有元件分為兩大類
- UI元件
只負責UI的呈現，不帶有任何業務邏輯 通過props接收資料，一般資料和函式 不使用任何Redux的API 一般儲存在components檔案下
- 容器元件
負責管理資料和業務邏輯，不負責UI的呈現 使用Redux的APi 一般儲存在containers資料夾下
Redux調式工具 步驟： 1、Chrome外掛 redux-devtools
2、npm install --save-dev redux-devtools-extension
3、編碼
import {composeWidthDevTools} from 'redux-devtools-extension'
const store = createStore(
counter,
composeWidthDevTools(applyMiddleware(thunk))
)
Redux、React-Redux還是比較複雜，還是要多看文件與練習，掌握其中的套路。