react 使用小结

1、动态获取object数据，必须给数据一个初始值，否则无法调用，对象里面的数据，跑出错误；

2、请求的数据最好在 componentDidMount 中，有动态更新的数据，用state存储，或者使用 mobx||redux 进行数据管理，其他的如 componentDidUpdate使用起来非常消耗性能，不建议在数据量大的时候使用；

3、mobx的es6写法，ie浏览器不支持，如需兼容ie最好采用es5的写法（ie下不支持Ant DesignButton中套用Link标签）；

4、babel 升级之后，webpack打包提示babel转移到babel-core ，在安装了之后babel-core还是报错，这是需要uninstall babel ,webpack里面的配置不再支持省略loader

      原写法：

         

{
                test: /\.css$/,
                loader: 'style!css'//添加对样式表的处理
}

　　新写法：

{
                test: /\.css$/,
                loader: 'style-loader!css-loader'//添加对样式表的处理
}

　　

 

5、关于react route自从升级到4.1.1版本之后，直接

<Router history={browserHistory}></Router>

会报错'react-router' does not contain an export named 'browserHistory'.，新版的估计不支持直接这样使用（可怜我3.0的react route都可以），所以现在我们使用react route必须要重新进行配置，看来网上教程说是在服务端进行设置，由于现在只是个人联系项目，所以教大家一下使用新的标签

请确保安装一下模块

    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"

import React, { Component } from 'react';
import { Switch, Redirect, Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router';
import { BrowserRouter, Link } from 'react-router-dom';
import { createHashHistory } from 'history';

// 登录界面
import Login from '../Login/index';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route path="/" component={Login} />
                </Switch>
            </BrowserRouter>
        );
    }
}

export default App;

　　路由包含在

BrowserRouter

Switch下就可以直接使用了，给大家看一下效果