zoukankan      html  css  js  c++  java
  • [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer

    Applications are driven by state. Many things, like the user interface, should always be consistent with that state.
    MobX is a general purpose FRP library that provides the means to derive, for example, a React based user interface automatically from the state and keep it synchronized.

    The net result of this approach is that writing applications becomes really straight-forward and boilerplate free.

    To synchronize the rendering of the state, we are going to use two functions from MobX. The first one is observable. We use observable to decorate our state to count attributes. We say, "MobX, please track this value, so that you can update observers whenever needed."

    Next, we mark our component with the observer decorator from the MobX React package. It simply tells MobX, "This component's rendering can be derived from the relevant observables. Do so whenever needed."

    const {observable} = mobx;
    const {observer} = mobxReact;
    const {Component} = React;
    
    @observer class Counter extends Component{
      @observable count = 0;
    
      render(){
        return(
          <div>
            Counter: {this.count} <br/>
            <button onClick={this.inc}>+</button>
            <button onClick={this.dec}>-</button>
          </div>
        )
      }
      
      inc = () => {
        this.count++;
      }
    
      dec = () => {
        this.count--;
      }
    }
    
    ReactDOM.render(
      <Counter />,
      document.getElementById('app')
    )

    Also spreate the state with the component will also works:

    const {observable} = mobx;
    const {observer} = mobxReact;
    const {Component} = React;
    
    const appState = observable({
       count : 0
    });
    appState.inc = function(){
      this.count++;
    }
    appState.dec = function(){
       this.count--;
    }
    
    @observer class Counter extends Component{
      render(){
        return(
          <div>
            Counter: {this.props.store.count} <br/>
            <button onClick={this.inc}>+</button>
            <button onClick={this.dec}>-</button>
          </div>
        )
      }
      
      inc = () => {
        this.props.store.inc();
      }
    
      dec = () => {
        this.props.store.dec();
      }
    }
    
    ReactDOM.render(
      <Counter store={appState}/>,
      document.getElementById('app')
    )
  • 相关阅读:
    杭电ACM 2052 Picture
    杭电ACM求平均成绩
    杭电ACM水仙花数
    cigarettes
    分数加减法
    推荐几个sql server牛人的博客
    npm 介绍
    centos Flash Player插件的安装
    node.js学习(1)
    查询功能:yum [list|info|search|provides|whatprovides] 参数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5548285.html
Copyright © 2011-2022 走看看