以前我们需要自己基于subscribe向事件池追加方法,以达到容器状态信息改变,执行我们追加的方法,重新渲染组件的目的,但是现在不用了,react-redux帮我们做了这件事:'所有用到redux容器状态信息的组件,都会向事件池中追加一个方法,当状态信息改变,通知方法执行,把最新的状态信息作用属性传递给组件,组件的属性值改变值改变了,组件也会重新渲染
////把redux容器中的状态信息遍历,赋值给当前组件的属性(state) let mapStateToProps=state=>{ //state就是redux容器中状态信息 //我们返回的是啥,就把它挂载到当前组件的属性上(redux存储很多信息,我们想用啥就返回啥即可) return { ...state.vote } }; //把redux的dispatch 派发行为遍历,也复制给组件的属性(ActionCreator) let mapDispatchToProps=dispatch=>{ //dispatch:store中存储的dispatch方法 //返回的是啥,就想当于把啥挂载到组件的属性上(一般我们挂载一些方法,这 // 些方法完成dispatch派发信息 return { init(initData) { dispatch(action.vote.init(initData)); } } }; export default connect([mapStateToProps],[mapDispatchToProps])(VoteBase) ======================= export default connect({state=>({...state.vote})},action.vote)(VoteBase) react-redux把action-creator中编写方法(返回action对象的方法),自动构造dispatch派发任务的方法,也就是mapDispatchToProps这种格式把redux容器中的状态信息遍历,赋值给当前组件的属性(state)todo实例
单页面应用(SPA)多页面应用(MPA)
多页面应用(MPA)
一个项目由很多页面组成,使用这个产品,主要就是页面之间的跳转(pc端多页面应用居多);
基于框架开发的时候,需要在webapck中配置多入口,每一个入口对应一个页面;
单页面应用(SPA)
只有一个页面,所有需要展示的内容都在这一个页面中实现切换,webapck只需要配置一个入口即可
移动端单页面应用居多或者pc端系统类也是单页面应用为主
如何实现单页面应用
弊端: 由于首页中的内容包含了所有模块的信息,所以第一次加载速度很慢
解决vue/react 实现模块化组件化开发,基于他们提供的路由实现SPA单页面应用,基于webpack打包
路由yarn add react-router-dom
BrowerRouter
浏览器路由
基于H5中history API(pushState,replaceState,popstate)来保持url和ui的同步
真实项目中应用不多,一般只有当前是基于服务器渲染的,我们才会使用浏览器路由
<BrowserRouter basename="/calendar"> <Link to="/today" /> </BrowserRouter> //最后呈现的地址 /calendar/todaybasename:string
所有位置的基准URL,basename的正确格式是前面有一个斜杠,但是尾部不能有
getUserConfirmation:func (这个有点不太懂)
用于确认导航函数,默认使用window.confirm
// 使用默认的确认函数 const getConfirmation = (message, callback) => { const allowTransition = window.confirm(message) callback(allowTransition) } <BrowserRouter getUserConfirmation={getConfirmation}/>keyLength:number
location.key的长度,默认是6
<BrowserRouter keyLength={12} />
children:node
单个子元素
HashRouter
哈希路由
真实项目中(前后端分离的项目:客户端渲染),我们经常使用哈希路由来完成的
基于原生js构造了一套类似于history API的机制,每一次路由切换都是基于window.location.hash 完成的
hash-router只能出现一个子元素
route
path:设置匹配地址,但是默认不是严格匹配,当前页面哈希地址只要包含完整的它(内容是不变的,都能匹配上)
path='http://www.likecs.com/' 和它匹配的只有要斜杆就可以
component :一旦哈希值和当前router的path相同了,则渲染component执行的组件
exact: 让path的匹配严谨一些
strict:不常用,但是要要加/
render: 权限校验,渲染组件之前验证是否存在权限,不存在做一些特殊处理
Switch组件可以解决这个问题,和switch case 一样,只要有一种校验成功,就不再向后校验 <HashRouter> <Switch> <Route path={'http://www.likecs.com/'} exact component={A}>AAA</Route> <Route path={'/user'} component={B}/> <Route path={'/pay'} render={() => { let flag = localStorage.getItem('flag'); if (flag && flag === 'safe') { return <C/> } return '权限不安全'; }}/> //上述都设置完成后,会在末尾设置一个匹配:以上都不符合的情况下,我们路由地址是违法的 //(不设置path就是匹配所有的地址规则) <Route render={ ()=>{ return <div>404</div> }}/> //重定向 //to [string] // <Redirect to='http://www.likecs.com/'/> </Switch> </HashRouter>basename:string 所有位置的基准URL
Link
react-router提供的路由切换组件
原理: 基于Link组件渲染,渲染后的结果就是A标签,To对应的信息最好变成href中的内容
to:string 一个字符串连接
to:object 一个对象的时候,下面属性
pathname - 要链接到的路径
search - 查询参数
hash - URL 中的 hash，例如 #the-hash
state - 存储到 location 中的额外状态数据
<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }} />replace:bool(默认是false) 替换history stack中当前的地址(true),还可以追加一个新的地址(false)
react-router中提供的组件必须在HashRouter或者BrowerRouter里面
NavLink
跟link类似,都是为了实现路由切换跳转的,不同在于,nav-link组件在当前页面hash和组件对应地址相吻合的时候,会默认给组件加一个active样式,让其选中态
Nav-Link不是点击谁,谁有选中的样式(但是可以路由切换),当前页面哈希后的地址和Nav-Link中的to进行比较,哪个匹配了,哪个才有选中的样式
to和replace等属性都有,用法一样
activeClassName:把默认的active样式改为自己设定的
activeSyle:把匹配的这个nav-link设置行内样式
exact & strict控制匹配的时候是否是严格匹配
isActive: 匹配后执行对应的函数
with-Router