Wie kombiniere ich React mit Mobx? Ausführliche Erklärung von React in Kombination mit Mobx (mit Beispielen)

In diesem Artikel wird hauptsächlich die detaillierte Erklärung von Reagieren in Kombination mit Mobx vorgestellt. Interessierte Schüler können es unten gemeinsam diskutieren. Schauen wir uns diesen Artikel gemeinsam an

1. npm install mobx mobx-react --save

2 🎜>

3. Konfigurieren Sie

"babel": {
"presets": [
"react-app"
],
"plugins": [ 
["transform-decorators-legacy"]       
]
}

in package.json 4. Erstellen Sie Store.js

import {observable, action, useStrict} from 'mobx';
useStrict(true);
class Store {
@observable num = 1;
@action plus(){
this.num ++;
}
@action minus(){
this.num --;
}
}
export default Store;

5. Fügen Sie Store

import {Provider} from 'mobx-react';
import Store from './utils/Store';
const store = new Store();
ReactDOM.render(
<Provider store={store}>
<Routes/>
</Provider>,
document.getElementById(&#39;root&#39;));

< zu index.js hinzu 🎜>6 Status in Main.js (Wenn Sie mehr wissen möchten, besuchen Sie die Spalte „React Reference Manual“ der PHP-Website, um mehr zu erfahren)

import {observer,inject} from 'mobx-react';
@inject("store") @observer
class Main extends Component {
render() {
let {num} = this.props.store;
 return <p>
<p>{num}</p>
<button onClick={()=>{this.props.store.plus()}}>加1</button>
<button onClick={()=>{this.props.store.minus()}}>减1</button>
</p>
}
}

7. Implementieren Sie den Effekt

Nach dem Klicken auf „1 hinzufügen“ wird

die Zählerfunktion implementiert.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen). .

Das obige ist der detaillierte Inhalt vonWie kombiniere ich React mit Mobx? Ausführliche Erklärung von React in Kombination mit Mobx (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!