路由统一管理(路由集中管理)
现在虽然我们能通过路由实现组件切换, 但是现在我们的路由都比较分散, 不利于我们管理和维护，所以 React 也考虑到了这个问题, 也给我们提供了统一管理路由的方案。
官方文档：https://www.npmjs.com/package/react-router-config
首先需要安装插件：
npm install --save react-router-config
然后在创建一个 router 目录在该目录当中创建一个 index.js 当然你也可以不用像我这样，你也可以在某一处地方创建一个 JS 文件在该文件当中编写对应的路由映射配置文件内容即可，index.js 内容如下：
import Home from '../components/Home' import About from '../components/About' import Other from '../components/Other' import User from '../components/User' import Login from '../components/Login' import Discover from '../components/Discover' const routers = [ { path: '/home', exact: true, component: Home }, { path: '/about/:name/:age', exact: true, component: About }, { path: '/user', exact: true, component: User }, { path: '/login', exact: true, component: Login }, { path: '/discover', exact: true, component: Discover }, { component: Other }, ]; export default routers;
更改 App.js 的一级路由：
import React from 'react'; import {NavLink, withRouter} from 'react-router-dom'; import {renderRoutes} from 'react-router-config'; import routers from './router/index'; class App extends React.PureComponent { render() { const obj = { name: 'BNTang', age: 18, gender: 'man' }; return ( <div> <NavLink to={'/home?name=BNTang&age=18'} activeStyle={{color: 'red'}}>Home</NavLink> <NavLink to={'/about/BNTang/18'} activeStyle={{color: 'red'}}>About</NavLink> <NavLink to={{ pathname: '/user', search: '', hash: '', state: obj }} activeStyle={{color: 'red'}} > User </NavLink> <NavLink to={'/discover'} activeStyle={{color: 'red'}}>广场</NavLink> <button onClick={() => { this.btnClick() }}> 广场 </button> {renderRoutes(routers)} </div> ) } btnClick() { this.props.history.push('/discover'); } } export default withRouter(App);
如上的更改主要内容为，就是把之前的 Route 去除了，利用了 react-router-config 当中的 renderRoutes 方法将我们编写的 routers 进行注册，然后我们的一级路由与对应的组件的关系就关联起来了。
嵌套路由
在博主对官方文档的阅读时发现，如果我们的路由有二级路由需要在一级路由当中在指定一下二级路由的规则，通过 routes 属性进行指定：
更改 router/index.js:
index.js:
import Home from '../components/Home' import About from '../components/About' import Other from '../components/Other' import User from '../components/User' import Login from '../components/Login' import Discover, {Hot, TopList, PlayList} from '../components/Discover' const routers = [ { path: '/home', exact: true, component: Home }, { path: '/about/:name/:age', exact: true, component: About }, { path: '/user', exact: true, component: User }, { path: '/login', exact: true, component: Login }, { path: '/discover', component: Discover, routes: [ { path: '/discover', exact: true, component: Hot, }, { path: '/discover/toplist', exact: true, component: TopList, }, { path: '/discover/playlist', exact: true, component: PlayList, }, ] }, { component: Other }, ]; export default routers;
更改 Discover.js 将其他三个需要使用到的组件导出一下：
export function Hot() { return ( <div>推荐</div> ) } export function TopList() { return ( <div>排行榜</div> ) } export function PlayList() { return ( <div>歌单</div> ) }
然后在嵌套路由的组件当中再次通过 renderRoutes 方法进行注册嵌套路由这里有个注意点，我们这里是需要注册的是一级路由当中的嵌套路由里面的 routes 的内容通过博主的计算发现它在 index.js 的索引为 4 然后我们的 Discover.js 的代码如下所示：
import React from 'react'; import {NavLink} from "react-router-dom"; import {renderRoutes} from 'react-router-config'; import routers from '../router/index'; export function Hot() { return ( <div>推荐</div> ) } export function TopList() { return ( <div>排行榜</div> ) } export function PlayList() { return ( <div>歌单</div> ) } class Discover extends React.PureComponent { render() { return ( <div> <NavLink exact to={'/discover'} activeStyle={{color: 'red'}}>推荐</NavLink> <NavLink exact to={'/discover/toplist'} activeStyle={{color: 'red'}}>排行榜</NavLink> <NavLink exact to={'/discover/playlist'} activeStyle={{color: 'red'}}>歌单</NavLink> <button onClick={() => { this.btnClick() }}>歌单 </button> { renderRoutes(routers[4].routes) } </div> ) } btnClick() { this.props.history.push('/discover/playlist'); } } export default Discover;
如上的 renderRoutes(routers[4].routes) 的写法是 2B 铅笔写法, 企业开发中千万不要这么写，如果当前组件是通过 renderRoutes 创建的, 那么系统过就会自动给这个组件传递一个 route 对象，然后我们可以根据这个 route 对象获取到嵌套路由的 routes 信息，然后推荐的写法和改造之后的代码如下：
{ renderRoutes(this.props.route.routes) }
什么是 Redux
Redux 是一个管理状态（数据）的容器，提供了可预测的状态管理
什么是可预测的状态管理
数据, 在什么时候，因为什么，发生了什么改变，都是可以控制和追踪的，我们就称之为预测的状态管理
为什么要使用 Redux
- React 是通过数据驱动界面更新的，React 负责更新界面，而我们负责管理数据
- 默认情况下我们可以在每个组件中管理自己的状态，但是现在前端应用程序已经变得越来越复杂
- 状态之间可能存在依赖关系（父子、共享等），一个状态的变化会引起另一个状态的变化
- 所以当应用程序复杂的时候，状态在什么时候改变，因为什么改变，发生了什么改变，就会变得非常难以控制和追踪
- 所以当应用程序复杂的时候，我们想很好的管理、维护、追踪、控制状态时，我们就需要使用 Redux
Redux 核心理念
- 通过
store来保存数据 - 通过
action来修改数据 - 通过
reducer将store和action串联起来
------------- ---------> | Component | --------- | ------------- | | ↓ ------------- ------------- ------------- | Store | <---- | Reducer | <---- | Action | ------------- ------------- -------------
例如如下示例：
const initialState = { heroes:[ {name:'鲁班'， age:18}, {name:'虞姬'， age:22}, ] } const action = {type:'CHANGE_NAME', playload:{index:0, newName:'黄忠'}} const action = {type:'CHANGE_AGE', playload:{index:1, newAge:66}} function reducer(state = initialState, action){ switch(action.type){ case: 'CHANGE_NAME': // 修改姓名 return newState; case: 'CHANGE_AGE': // 修改年龄 return newState; } }
官方文档： https://www.redux.org.cn/docs/introduction/CoreConcepts.html
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
