SPA
单页应用的功能示意图如下:
路由
在点击导航选项的时候,让对应内容填充的到页面,实现这种效果的方式就是路由。简单来说,路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径来请求不同的资源。
router.get(path,function(rep,res))注册路由
分类
后台路由
router.get(path,function(req,res){})
前台路由
let history = History.createBrowserHistory();
//let history = History.createHashHistory();//H5中写法,使用锚点方法记录哈希值
history.push(param) //设置
history.goBack() //回退
history.goForward() //前进
histroy.replace(param) //替换
history.listen((location)=>{})
文档: https://reacttraining.com/react-router/web/guides/philosophy
###相关API
1、组件
- <BrowserRouter>
- <HashRouter>
- <Router>
- <Redirect>
- <Link>
- <NavLink>
- <Switch> //切换
2、其他
3、使用
先安装
npm install --save react-router-dom //web版本
路由组件view与非路由组件components
使用路由组件的时候: 链接换成导航路由链接。
组件要用路由组件包裹。
思考:如何编写路由效果?
<NavLink> or < Link>
<Route>
通过路由链接传递数据,在路径中插入占位符(参数)
用js方式,非标签方式:
this.props.history.push/replace/goBack/goForward
this.props.match
www.material-ui.com
)ant.design/index-cn
) mobile(mobile.ant.design/index-cn
)如何按需打包需要的样式:
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
文档:http://www.redux.org.cn
action:
标识要执行行为的对象
包含2个方面的属性 type: 表示属性,值为字符串,唯一,必要属性 xxx:数据属性,值类型任意,可选属性 eg:
const action = {
type:'INCREMENT',
data:2
}
Action Creator(创建Action的工厂函数)
const increment = (number)=>({type:'INCREMENT',data:number})
reducer
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对象
import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
此对象的功能?
getState(): 得到state dispatch(action): 分发action,触发reducer调用,产生新的state subscribe(listener): 注册监听,当产生新的state时,自动调用
什么情况需要redux:
一个规定的套路。需要多写几遍。
1、一个react插件库 2、专门用于简化react应用中使用redux
使用redux先写好结构:
使用Provider
组件对dispatch、subscribe、getState…进行全局管理
只负责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还是比较复杂,还是要多看文档与练习,掌握其中的套路。