1. Review of
the high-order components, diff algorithms, virtual DOM, non-controlled components
2, react the state manager mobx
VUE family bucket: vue-cli + vue + vue -router + axios / fetch + vuex + vant / mint-ui / element-ui / iview + scss / less / css / stylus + .. ...
react全家桶: create-react-app + react + react-dom + react-router-dom + axios/fetch + (redux + redux-thunk + react-redux) + antd / antd-mobile + prop-types + ......
react全家桶: create-react-app + react + react-dom + react-router-dom + axios/fetch + (mobx + mobx-react) + antd / antd-mobile + prop-types + ......
2.1 decorator (Decorator) es7 syntax
is a function, for decoration | Class Members
Is syntactic sugar (Object.defineProperty)
Object.defineProperty (parameters): edit or add to the subject property
Parameters: property descriptor target goal prop for description of target
How (how to use):
@ Decorator name
Examples of property @ decorator class name | static properties
Examples of methods @ decorator class name | static method
Usage scenarios (where used)
mobx / angluar + Ts
2.2 Configuration
installation: npm i @ babel / plugin- proposal-decorators --save
Place: package.json
babel: {
"presets":...
- "plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],]
....
}
Configuration: vscode-> Settings -> Search Set Input: experimentalDecorators-> without setting the hook webstrom
3 mobx members: observable action
Doing it: MobX idea is to make the processing of data by tracking the observer mode, in time to make changes to observable attributes or references, triggering its dependence monitor function
Store the entire context react using injection mechanism provided to transfer
How to use: the definition of class
Members @observable decoration store category for the observed
@action example method, the modified state, synchronous asynchronous modifications are not recommended to change the internal components
With where: react
4 mobx-react members: inject, observer, Provider
Provider: store the top layer to provide services, Provider store = {store}
inject: injecting provided to store Provider props of the assembly, the internal components used
inject a higher-order component of high-order component returns is a component, in the role of packaging components
Scene: export default inject ( 'store') (react functional component)
@inject is a decorator, decoration is a class in itself and class members,
@inject ( 'store') class class components
observer: Set current component to the observer, who is monitored upon occurrence of a change in the store will be detected in view of the forced refresh @observer class class components ..
const component = observer ((store) => {jsx})
3 / mobx idea
3.1 install module
cnpm i mobx mobx-react -S
cnpm i @babel/plugin-proposal-decorators --save
3.2 修改package.json文件
"babel": {
"presets": [
"react-app"
],
// ++++++++++++++++++++
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
3.3 src/store/index.js
class Store {
}
Export new new default Store ()
3.4 is introduced at the inlet page Store
Import} from {Provider 'mobx-REACT'
Import from Store './store'
reactDOM.render(
<Provider store = { store }>
,
Document.getElementById ( 'the root')
)
3.5 of Store / home.js the representative home state required
class Homestore {
constructor (Store) {
this.store = Store
}
}
Export default Homestore
simultaneously written state classification
class KindStore {
constructor(store) {
this.store = store
}
}
export default KindStore
3.6 store/index.js引入分模块
import HomeStore from './home'
import KindStore from './kind'
Store {class
this.home Homestore new new = (the this)
this.kind = new new KindStore (the this)
}
Export new new default Store ()
3.7 setting the initial state and the function Store / home.js
// Observable state
// action function
import {observable , Action} from 'mobx'
class Homestore {
constructor (Store) {
this.store = Store
this.getBannerlist = this.getBannerlist.bind (the this)
}
// initial state
@observable bannerlist: [l, 2,3]
@observable prolist: []
// 函数
@action
getBannerlist() {
this.bannerlist = [4, 5, 6]
}}
Export default Homestore
internal components used state 3.8 the src / The index.js
Import {Observer, Inject} from 'mobx-REACT';
// + dependency injection observer
@Inject ( 'Store')
via @Observer
class Com the extends React.Component {
// get status this.props.store.home.bannerlist
// function this.props.store.home.getBannerlist
the render ( ) {
the let {Store: Home {: {bannerlist, getBannerlist this.props} =}}
}
}