【React】归纳篇（十）组件间通信方式之Redux | UI组件AntDesign | Redux-react
【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-devhttps://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还是比较复杂，还是要多看文档与练习，掌握其中的套路。