概念回顧

observable 類似于 store
observer 是裝飾后的react組件
action 用來改變 observable 的狀態(tài)

Class聲明 Observerable

class AppState {
    @observable timer = 2
    @action clearTimer() {
        this.timer = 0
    }
}

var appState = new AppState()

@observer
class App extends React.Component {
  componentDidMount() {
    this.props.appState.timer++

  }
  render() {
    return (
      <div>
        <div className="App">
          <h1>Time passed: {this.props.appState.timer}</h1>
        </div>
      </div>
    );
  }
};

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

組件內(nèi)定義局部observerable

@observer
class TodoList extends React.Component {
  @observable newTodoTitle = "";

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          New Todo:
          <input
            type="text"
            value={this.newTodoTitle}
            onChange={this.handleInputChange}
          />
          <button type="submit">Add</button>
        </form>
        <hr />
        <ul>
          {this.props.store.todos.map(todo => (
            <Todo todo={todo} key={todo.id} />
          ))}
        </ul>
        Tasks left: {this.props.store.unfinishedTodoCount}
      </div>
    );
  }

  @action
  handleInputChange = e => {
    this.newTodoTitle = e.target.value;
  };

  @action
  handleFormSubmit = e => {
    this.props.store.addTodo(this.newTodoTitle);
    this.newTodoTitle = "";
    e.preventDefault();
  };
}

computed

class AppState {
    @observable timer = 2
    @computed get timessTwo() {
        return this.timer * 2
    }
    set timessTwo(timessTwo) {
        this.timer = timessTwo / 2
    }
}

@observer
class App extends React.Component {
  componentDidMount() {
    this.props.appState.timessTwo++
  }
  render() {
    return (
      <div>
        <div className="App">
          <h1>Time passed: {this.props.appState.timer}</h1>
          <h2>after times 2 :{this.props.appState.timessTwo}</h2>
        </div>
      </div>
    );
  }
};

autorun & reaction

監(jiān)聽

autorun(() => {
    console.log(appState.timer)
})

const reaction1 = reaction(
    () => appState.timer ,
    timer => console.log(`reaction 1: ${timer}`)
);

開發(fā)工具

cnpm i mobx-react-devtools

import DevTools from "mobx-react-devtools";

{process.env.NODE_ENV !== 'production' ? <DevTools /> : null}

嚴格模式

import { configure } from "mobx";
configure({ enforceActions: true }) // 不允許在action之外進行狀態(tài)修改

異步

1 runInAction

mobx.configure({ enforceActions: true })

class Store {
    @observable githubProjects = []
    @observable state = "pending" // "pending" / "done" / "error"

    @action
    fetchProjects() {
        this.githubProjects = []
        this.state = "pending"
        fetchGithubProjectsSomehow().then(
            projects => {
                const filteredProjects = somePreprocessing(projects)
                // 將‘“最終的”修改放入一個異步動作中
                runInAction(() => {
                    this.githubProjects = filteredProjects
                    this.state = "done"
                })
            },
            error => {
                // 過程的另一個結(jié)局:...
                runInAction(() => {
                    this.state = "error"
                })
            }
        )
    }
}

2 await/async

class Store {
    @observable githubProjects = []
    @observable state = "pending" // "pending" / "done" / "error"

    @action
    async fetchProjects() {
        this.githubProjects = []
        this.state = "pending"
        try {
            const projects = await fetchGithubProjectsSomehow()
            const filteredProjects = somePreprocessing(projects)
            // await 之后态秧，再次修改狀態(tài)需要動作:
            runInAction(() => {
                this.state = "done"
                this.githubProjects = filteredProjects
            })
        } catch (error) {
            runInAction(() => {
                this.state = "error"
            })
        }
    }
}

3 flow(generator function)

class Store {
    @observable githubProjects = []
    @observable state = "pending"

    fetchProjects = flow(function * () { // <- 注意*號宪躯，這是生成器函數(shù)！
        this.githubProjects = []
        this.state = "pending"
        try {
            const projects = yield fetchGithubProjectsSomehow() // 用 yield 代替 await
            const filteredProjects = somePreprocessing(projects)
            // 異步代碼塊會被自動包裝成動作并修改狀態(tài)
            this.state = "done"
            this.githubProjects = filteredProjects
        } catch (error) {
            this.state = "error"
        }
    })
}

tip

使用大量的小組件

@observer 組件會追蹤它們使用的所有值概疆，并且當它們中的任何一個改變時重新渲染圈驼。 所以你的組件越小匣椰，它們需要重新渲染產(chǎn)生的變化則越小;這意味著用戶界面的更多部分具備彼此獨立渲染的可能性顺呕。

腳手架

https://github.com/mobxjs/mobx-react-boilerplate