react-router和mobx基本配置

路由配置

1、导入包

yarn add react-router-dom;

PS:

react-router 和 react-router-dom

react-router: 实现了路由的核心功能。
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能。
react-router-dom 是 react-router 的加强版呗

因为 React Native 也要路由系统呀。所以还有一个库叫 react-router-native，这个库也是基于 react-router 的，它类似 react-router-dom，加入了 React Native 运行环境下的一些功能。

react-router-dom
react-router-native

React BrowserRouter和HashRouter的区别

BrowserRouter：h5路由（history API）
HashRouter：哈希路由

主要区别

BrowserRouter 和 HashRouter 都可以实现前端路由的功能
BrowserRouter 实现的是单页面的路由切换
HashRouter 实现的是全局路由切换

从原理上

HashRouter在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter，和散列没关系哦））
而BrowserRouter使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。

从用法上

BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信，而HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux或mobx使用，实现组件间的数据通信。

2、新增加Router.js文件

import React from 'react';

import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';

import App from './App.js';

const Router = () => (
    <BrowserRouter>
        <App/>
    </BrowserRouter>
)
export default Router;

3、修改index.js

原App 换成 Router

import Router from './Router';

<Router />

4、App.js(需增加代码分割)

import React , { Component, Suspense, lazy } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';

const Home = lazy(() => import('./views/Home'));
import Input from './view/input';
import Event from './view/event';

class App extends Component {
    render(){
        return (
            <Suspense fallback={<div>Loading...</div>}>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/input" component={Input} />
                <Route path="/event" component={Event} />
            </Switch>
            </Suspense>
        );
    }
}
export default App;

5、新增页面

import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
class View extends Component {
    render(){
        return (
            <React.Fragment>
                <div className="mian">这是首页面</div>
                <NavLink to="/">首页</NavLink><br/>
                <NavLink to="/input">表单</NavLink><br/>
                <NavLink to="/event">事件</NavLink>
            </React.Fragment>
        )
    }
}
export default View;

以上就是React路由配置 下面是mobx安装配置紧接上面即可

创建项目第六步 mobx

1、安装

yarn add mobx
yarn add mobx-react

2、新建/src/store/store.js

import {observable, computed, action, autorun,runInAction} from 'mobx';
// import {observable, computed, action} from 'mobx';
class Store {
    @observable tradeCfg = {
        'sadf':'sadf'
    };
    @observable baseInfo = {};
    @observable callback = null;
    @observable token = [
        {
            "id":1,
            "name":"YD"
        },
        {
            "id":2,
            "name":"ETH"
        }
    ];
}

export default Store;

3、Router.js 新增加如下代码

把Router.js里没有的加上就好了

import { Provider } from 'mobx-react';
import { observable, useStrict ,autorun} from 'mobx';

import App from './App.js';
import firstStore from './store/first';
// const cnstore = new cnStore();
const stores = {
  first: new firstStore(),
  // ...other stores
};

<Provider {...stores}>
    <App/>
</Provider>

完整代码如下：
import React from 'react';
import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';
import { Provider } from 'mobx-react';
import { observable, useStrict ,autorun} from 'mobx';
import App from './App.js';
import firstStore from './store/store';
// const cnstore = new cnStore();
const stores = {
  first: new firstStore(),
  // ...other stores
};

const Router = () => (
    <BrowserRouter>
        <Provider {...stores}>
            <App/>
        </Provider>
    </BrowserRouter>
)
export default Router;

mobx 报错

SyntaxError: /Users/hello/workspace/fe.youdeal.io/app/my-app/src/store/otc.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (3:5):

  1 | import {observable, computed, action} from 'mobx';
  2 | class Store {
> 3 |     @observable tradeCfg = {
    |     ^
  4 |         'sadf':'sadf'
  5 |     };
  6 |     @observable baseInfo = {};

以上问题 需安装

yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties

4、创建的新增页面调整

import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';

import {observer,inject} from 'mobx-react';
// 导入需要的模块
@withRouter
@inject('first')
@observer
class View extends Component {
    render(){
        console.log(this.props.first)
        return (
            <React.Fragment>
                <div className="mian">这是event面</div>
                <NavLink to="/">首页</NavLink><br/>
                <NavLink to="/input">表单</NavLink><br/>
                <NavLink to="/event">事件</NavLink>
            </React.Fragment>
        )
    }
}
export default View;

需添加代码 package.json(替换代码presets)

"presets": [
        ["react-app"],
        ["@babel/preset-react"]
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", {"legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }]
]

常见问题

MobX 是框架吗?
MobX 不是一个框架。它不会告诉你如何去组织你的代码，在哪存储状态或者如何处理事件。然而，它可能将你从以性能的名义对你的代码提出各种限制的框架中解放出来。
MobX
简单、可扩展的状态管理

MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming – TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

任何源自应用状态的东西都应该自动地获得。

其中包括UI、数据序列化、服务器通讯，等等。

为什么使用Mobx
React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

一些简单的api介绍

1:状态state
组件中的数据。

2:被观察observable
被observable修饰的state数据将会暴露给整个app，各观察者组件都可以根据state值的变化作出响应。

3:观察者observer
被observer修饰的组件，将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染（原理：用autorun包裹了render函数，state变化触发autorun从而自动渲染）

4:action
state值的修改需要在action函数中进行。

5:衍生值computed
get：基于state值，通过一些计算得到的新值并返回给调用者。
set：get的相反运算，参数为一个值，由该值进行get函数中的反运算，得到对应的state值并赋予state。

6:衍生行为autorun
基于state的变化而触发的一系列行为（注意：这些行为不改变state值、不产生新的数据），
通常为日志记录、请求发送、UI渲染等。

import { Provider } from ‘mobx-react’;

mobx-react中Provider和inject通过context将store注入并使得任何层级的子组件可以访问到store。
在根组件通过Provider组件注入它

import { withRouter,NavLink,Switch,Redirect,Route} from ‘react-router-dom’;

import {observer,inject} from ‘mobx-react’;
// 导入需要的模块
@withRouter
@inject(‘first’)
@observer

@inject(‘first’)
在子组件中通过inject获取store

@observer
可以把你的(无状态函数)组件变成响应式组件，方法是在组件上添加 observer 函数/ 装饰器.

@withRouter
1.目的就是让被修饰的组件可以从属性中获取history,location,match
路由组件可以直接获取这些属性，而非路由组件就必须通过withRouter修饰后才能获取这些属性了
2.withRouter是专门用来处理数据更新问题的。
在使用一些redux的的connect()或者mobx的inject()的组件中，如果依赖于路由的更新要重新渲染，会出现路由更新了但是组件没有重新渲染的情况。这是因为redux和mobx的这些连接方法会修改组件的shouldComponentUpdate。