Mobx入门之一：observable & observer

被惊艳到

被Mobx这张简单的函数响应式编程的原理图惊艳到，足够简单，高效，所以决定入门

state才是状态管理的核心，Mobx有句话描述了什么才是真正的响应式，也就是他们正在做的：

Anything that can be derived from the application state, should be derived. Automatically.

下面进入第一课，observable & observer

环境搭建

1 create-react-app

npx create-react-app steps
cd steps && yarn start

2 安装mobx, mobx-react

yarn add mobx mobx-react
yarn add react-app-rewired react-app-rewire-mobx --dev

3 修改配置文件

package.json

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  }

config-overrides.js

const rewireMobX = require('react-app-rewire-mobx');

/* config-overrides.js */
module.exports = function override(config, env) {
  config = rewireMobX(config, env);
  return config;
}

4 源码

import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'

@observer class App extends Component {
  @observable count = 0

  render() {
    return (
      <div>
        Counter: {this.count} <br/>
        <button onClick={this.handleDec}>-</button>
        <button onClick={this.handleInc}>+</button>
      </div>
    )
  }

  handleInc = () => {
    this.count++
  }

  handleDec = () => {
    this.count--
  }
}

export default App;

5 分割state到store中

import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'

const appState = observable({
  count: 0
})
appState.increment = function () {
  this.count++
}

appState.decrement = function () {
  this.count--
}

@observer class App extends Component {
  render() {
    return (
      <div>
        Counter: {this.props.store.count} <br/>
        <button onClick={this.handleDec}>-</button>
        <button onClick={this.handleInc}>+</button>
      </div>
    )
  }

  handleInc = () => {
    this.props.store.increment()
  }

  handleDec = () => {
    this.props.store.decrement()
  }
}

export default App;

ReactDOM.render(<App store={appState}/>, document.getElementById('root'));
registerServiceWorker();

6 去除store

import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'

const appState = observable({
  count: 0
})
appState.increment = function () {
  this.count++
}

appState.decrement = function () {
  this.count--
}

@observer class App extends Component {
  render() {
    return (
      <div>
        Counter: {appState.count} <br/>
        <button onClick={this.handleDec}>-</button>
        <button onClick={this.handleInc}>+</button>
      </div>
    )
  }

  handleInc = () => {
    appState.increment()
  }

  handleDec = () => {
    appState.decrement()
  }
}

export default App;

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

observer derived from observable!

注意：要使得装饰器@生效，可以参考下面的文章：

https://mobx.js.org/best/decorators.html

https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-mobx

参考资料：

https://egghead.io/lessons/javascript-sync-the-ui-with-the-app-state-using-mobx-observable-and-observer-in-react