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')
    )
  • 相关阅读:
    DNS正向反向解析
    varnish-4.0.5的反向代理 缓存测试 负载均衡实验
    DS8700 硬盘更换略
    ftp虚拟用户
    maven mvn 命令行 编译打包
    linux下的springboot项目启动文件
    linux系统安装gcc
    linux系统下安装两个或多个tomcat
    linux系统的磁盘挂载
    常用linux命令
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5548285.html
Copyright © 2011-2022 走看看