近期利用刚学习的react知识，写了一个后台内容管理系统，遇到的坑还是挺不少的，小小的总结一下，以后可能会用到呢。
1.多页面展现
在后台管理系统中往往会出现左边标签按钮，右边是标签页面的情况，用路由固然能够实现，但是非常麻烦。所以此次采用antd组件库的标签页组件，那怎么实现路由以及标签页的联动切换呢，这就是此次项目的第一个难点，也是构建系统的整体框架结构。
系统使用了react的路由系统，默认路由到 “/” 就是home页面，不过在进入home页面之前，要进行判断是否登录，这就要用到高阶组件的渲染劫持。在进行默认路由的时候，将默认的home页面传进高阶组件，在高阶组件中进行判断用户是否登录，如果没有登陆直接利用变成路由，路由到登陆页面，在登陆页面登陆验证之后，修改状态管理redux中的数据，利用高阶组件渲染home页面。
进行home页面如何根据左边选中的标签按钮，增加标签页并进行切换呢，就要用到路由监听了。
在home页面并不能调用路由监听的函数 因此在高阶组件中进行路由监听，并且根据分页标签的属性及规定，判断是否添加页面，并将props以及方法传递进home，home页面拿到数据方能进行页面展示，以及根据props中的路由以及数据判断左边的按钮应该哪个被选中。点击切换分页时，调用高阶组件传递过来的函数，根据切换的页面进行路由跳转。
详见个人项目开发mybackground
2.使用路由
1, 下载react的路由模块
npm install react-router-dom --save
2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件
import { BrowserRouter as Router } from 'react-router-dom'
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
3, 创建路由文件src/router/index.js,并导出,别忘了导入react 并从路由模块中导入工具组件Route
import { Route } from "react-router-dom";
import Home from "......."
export default function MyRouter(){
return(
<div>
<Route exact path="/" component={Home} />
</div>
)
}
4, 在app.js中导入路由组件 并配置路由出口
import RouterView from './router/index';
<RouterView></RouterView>
5, 在需要跳转的页面, 从路由模块导入工具组件 Link,并配置目标
import {Link} from 'react-router-dom'
<Link to="/">首页/Link>
3.使用状态管理
1, 下载安装 redux 模块
npm install redux --save
2,创建数据仓库 src/store/index.js 从redux导入创建函数creatStore, 合并函数combineReducers
import { createStore, combineReducers } from "redux";
3, 定义reducer函数
function countReducer(state = 0, action){
switch (action.type) {
case "ADD":
return state + action.number
default:
return state
}
}
4, 把多个reducer函数合并成一个
var reducers = combineReducers({
count: countReducer,
})
5, 创建并导出数据仓库
export default createStore(reducers)
6, 在组件中导入数据仓库
import store from "../store/index"
7, 读取仓库中的数据
store.getState().count
8, 更新仓库中的数据
store.dispatch({
type: "ADD",
number: this.refs.input.value * 1 || 1
})
9, 监听仓库中数据的更新
store.subscribe(()=>{
console.log("数据已更新")
})
注: store.subscribe() 添加监听后会返回一个函数, 调用返回的函数可以结束监听
4.状态管理实时监听
在项目中时常要根据状态管理的更新而更新某个页面，如果使用状态管理的监听函数的话，他是全局监听并不能监听某一个值的变化，因此如果利用状态管理的监听函数进行监听，并更新页面的话，可能某一个值的更新会引起不必要的页面更新。
因此采用redux状态同步，模拟进行数据映射，实时监听所需要的值的变化， store中某个状态改变时自动更新相应组件。
1, 下载安装模块
npm install react-redux --save
2, 在入口文件src/index.js中导入供应组件和状态仓库
import { Provider } from "react-redux";
import store from "./store/index";
3, 在入口文件src/index.js中,使用供应组件包裹根组件,并绑定仓库
<Provider store={store}>
<App />
</Provider>
4, 在相应组件中导入redux链接函数connect
import {connect} from "react-redux";
5, 在相应组件中创建state映射函数,并用connect把状态数据绑定给组件props
function mapState(state){
return {
isLoading:state.isLoading
}
}
App = connect(mapState)(App);
注: 参数state指状态数据对象, isLoading指一个状态数据
6,在相应组件中使用props中的状态数据
{this.props.isLoading}
注: 此时,当仓库数据isLoading发生变化时,组件自动更新
5.函数封装
不管是ajax请求还是通道过滤数据亦或是修改状态管理的值，都可以进行函数封装，在需要的时候，引用相应的文件，会让整个项目结构显的更加清晰明了。
6.promise封装异步函数
好处：
1.函数封装，让结构更加清晰，复用性更强
2.方便使用Promise.race或者Promise.all处理多个异步处理函数之间的关系，比如必须多个请求都完成之后才能进行下一步的操作
7.this.setState()的坑
一般在react中利用this.setState()进行数据修改之后，进行更新页面，但有时数据还没更新，就进行了下一步的操作，导致试图没有更新。因此因该在this.setState()中传入第二个参数比如
this.setState({
这里修改数据
}，（）=>{
这里进行修改数据之后的操作
})
