【React】归纳篇（十）组件间通信方式之Redux | UI组件AntDesign | Redux-react

react-router4

react-router概览

• 1、react的一个插件库
• 2、专门用于实现一个SPA应用
• 3、基于react的项目都会用到该库

SPA

• 1、点击页面中的链接不会刷新页面，本身也不会向服务器发送请求(即：页面地址的跳转都是在浏览器端实现的，不会去重新请求服务端获取 html，html 只是在应用初始化的时候加载一次。)
• 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的使用

文档：
https://reacttraining.com/react-router/web/guides/philosophy

###相关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

https://mobile.ant.design/docs/react/use-with-create-react-app-cn

redux （难点）

• 语法套路深

文档：http://www.redux.org.cn

概览

• redux 是一个独立专门用于做状态管理的JS库，不是React插件库
• 它可以用在react,angular,vue等项目中，但基本与react配合使用
• 作用：集中式管理react应用中多个组件共享的状态。

• Store : 核心，管理对象
  内部维护： state、 reducer
  核心方法： getState()获取状态；dispatch(action)分发事件，会触发Reducers调用；subscribe(listener)发布，重新渲染组件；

action：

• 标识要执行行为的对象
• 包含2个方面的属性
  type: 表示属性，值为字符串，唯一，必要属性
  xxx:数据属性，值类型任意，可选属性
  eg:

  const action = {
  	type:'INCREMENT',
  	data:2
  }
  

  Action Creator(创建Action的工厂函数)

  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还是比较复杂，还是要多看文档与练习，掌握其中的套路。