https://segmentfault.com/a/1190000017210172#articleHeader0
2.解决so easy,router只有一个子元素用div包一下即可。
Antd 按需引入
1. cnpm install antd --save
2.cnpm i babel-plugin-import -D
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
3. // .babelrc or babel-loader option
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
4. import { Button} from 'antd';
这时这样按需引入并不会加载进去样式
Axios请求配置
1.cnpm isntall axios --save
2.
Redux 配置
1.cnpm install --save redux react-redux redux-thunk
2.cnpm install --save-dev redux-logger
Redux:当成一个本地数据库使用,react-redux:数据订阅,redux-thunk:实现异步action,redux-logger是redux的日志中间件。
3. React-Redux 提供<Provider/>组件,能够使你的整个app访问到Redux store中的数据
4. action:提供一些状态函数,store数据的来源就是action,需要至少一个type,type是这个指令的唯一标识,其他元素是传送这个指令的state值,这个指令有组件触发,然后传到给reducer!
5. reducer:如果action申明了要做什么,那么具体区改变(更新)state,就是reducer做的事情了,这样理解吧,action约定了一个type,然后reducer遇到这个type,就去做一件事!
配置缓存系统:
6. store:真的就是数据分发的地方,store→view,他就这么一个作用,把数据给view,展示页面。主要有一下功能(摘录自网上的语录,我觉得说的最清楚的了)
1:维护整个应用的state;
2:提供getState()方法获取state;后面有了插件,也不需要这些具体的方法了
3:提供dispatch(action) 方法更新 state;
4:通过 subscribe(listener) 注册监听器。
7.页面书写
获取修改
console.log(this.props.userName,3333);
const {saveUserName} = this.props;
saveUserName(222);
错误.
解决react-router中this.props.history.push无法使用问题
1.v4 的组件BrowserRouter自己创建了history,不暴露出来,不让我们引用,而Router组件的history可暴露出来,供我们调用。
2.自己创建一个history
// src/history.js
import createHistory from 'history/createBrowserHistory';
export default createHistory();
3. 使用Router组件
// src/index.js
import { Router, Link, Route } from 'react-router-dom';
import history from './history';
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
...
</Router>
</Provider>,
document.getElementById('root'),
);
会有个提示报错
修改:
1. cnpm install --save history
2.
// using ES6 modules
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
配置aes加密+md5加密
1. 在index.html中引入aes.js/md5.js
2.直接引入会报错
解决:
引入mock.js
1.cnpm i -D mockjs
2.在根目录新建mock.js
2. 在app.js里头引入mock.js
3. 接口处直接调用即可