Routing configuration
1. Import package
yarn add react-router-dom;
PS:
React router and react router DOM
react-router: The core function of routing is realized. react-router-dom: be based on react-router，Added some functions in the browser running environment. react-router-dom yes react-router An enhanced version of
Because React Native also needs a routing system. Therefore, there is also a library called react router native. This library is also based on react router. It is similar to react router Dom and adds some functions under the React Native running environment.
react-router-dom
react-router-native
Difference between React BrowserRouter and HashRouter
BrowserRouter: h5 Routing( history API) HashRouter: Hash routing
Main differences
BrowserRouter and HashRouter Can realize the function of front-end routing BrowserRouter It realizes single page routing switching HashRouter It implements global routing switching
In principle
HashRouter The path contains#，amount to HTML Anchor positioning for. (# The English name of the symbol is hash, so it is called HashRouter, which has nothing to do with hashing.) and BrowserRouter Using HTML5 New features of History，No, HashRouter(Anchor location)In that case, lower version browsers may not support it.
In terms of usage
BrowserRouter During component jump, any parameter can be passed to realize the communication between components, and HashRouter No(Unless spliced manually URL character string)，Therefore, general cooperation Redux or mobx Use to realize data communication between components.
2. New router JS file
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. Modify index js
primary App change into Router import Router from './Router'; <Router />
4,App. JS (code segmentation needs to be added)
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. New page
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">This is the front page</div>
<NavLink to="/">home page</NavLink><br/>
<NavLink to="/input">form </NavLink><br/>
<NavLink to="/event">event</NavLink>
</React.Fragment>
)
}
}
export default View;
The above is the React routing configuration. The following is the mobx installation configuration. Just follow the above
Create project step 6 mobx
1. Installation
yarn add mobx yarn add mobx-react
2. New / 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 add the following code
Put the router Just add what's not in 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>
The complete code is as follows:
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 error reporting
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 = {};
The above problems need to be installed
yarn add @babel/plugin-proposal-decorators yarn add @babel/plugin-proposal-class-properties
4. New page adjustments created
import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import {observer,inject} from 'mobx-react';
// Import required modules
@withRouter
@inject('first')
@observer
class View extends Component {
render(){
console.log(this.props.first)
return (
<React.Fragment>
<div className="mian">This is event noodles</div>
<NavLink to="/">home page</NavLink><br/>
<NavLink to="/input">form </NavLink><br/>
<NavLink to="/event">event</NavLink>
</React.Fragment>
)
}
}
export default View;
common problem
Is MobX a framework?
MobX is not a framework. It doesn't tell you how to organize your code, where to store state, or how to handle events. However, it may liberate you from a framework that imposes various restrictions on your code in the name of performance.
MobX
Simple and scalable state management
MobX is a war baptism library, which makes state management simple and scalable through transparent applying functional reactive programming (TFRP). The philosophy behind MobX is simple:
Anything derived from the application state should be obtained automatically.
These include UI, data serialization, server communication, and so on.
Why Mobx
React and MobX are a powerful combination. React provides a mechanism to transform the application state into a renderable component tree and render it. MobX provides a mechanism to store and update application status for react.
Some simple api introduction
1:state state Data in the component. 2:Observed observable cover observable Embellished state The data will be exposed to the whole world app，Each observer component can be based on state Respond to changes in values. 3:Observer observer cover observer The modified component will be modified according to the information used in the component observable Embellished state Automatic re rendering (principle: Using autorun It's wrapped render Function, state Change trigger autorun To render automatically) 4:action state The value needs to be modified in action Function. 5:Derived value computed get: be based on state Value, the new value obtained through some calculation and returned to the caller. set: get In the opposite operation, the parameter is a value and is performed by that value get Function to get the corresponding state Value and assign state. 6:Derivative behavior autorun be based on state A series of behaviors triggered by changes in (Note: these behaviors do not change state Value, no new data generated), Usually logging, request sending UI Rendering, etc.
import { Provider } from 'mobx-react';
In mobx react, the Provider and inject inject inject the store through the context, so that sub components at any level can access the store.
Inject it through the Provider component at the root component
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import {observer,inject} from 'mobx-react';
//Import required modules
@withRouter
@inject('first')
@observer
@inject('first')
Get the store through inject in the sub component
@observer
You can turn your (stateless function) component into a responsive component by adding an observer function / decorator to the component
@withRouter
1. The purpose is to enable the modified component to obtain history, location and match from the attribute
Routing components can obtain these attributes directly, while non routing components can obtain these attributes only after being modified by withRouter
2.withRouter is specially used to deal with data update problems.
In components that use redux connect() or mobx inject(), if the update that depends on the route needs to be re rendered, the route is updated but the component does not re render. This is because these connection methods of redux and mobx will modify the shouldComponentUpdate of the component.