• AntDesign(React)学习-11 使用mobx


    mobx 是由 Mendix、Coinbase、Facebook 开源和众多个人赞助商所赞助的。

    mobx和redux类似,也可以用来进行状态管理,并且更简单,更灵活。初次研究,先实现一个最简单的功能修改一个字符串值

    官网:https://cn.mobx.js.org

    1、安装

    yarn add mobx-react --save
    yarn add mobx --save

    ...

     2、添加import

    import { observer } from 'mobx-react';
    import { observable, computed, action } from 'mobx';

    3、修改UserRole代码如下

    import React from 'react';
    import { observer } from 'mobx-react';
    import { decorate,observable, computed, action } from 'mobx';
    import { Button,Input} from 'antd';
    @observer
    class UserRole extends React.Component { 
      constructor(props) {
        super(props);
      }
      @observable roleName = "123";
      handleTestClick = e => {
        this.roleName="234";
        console.log(this.roleName);
      };
      render() {
        return (
          <div>角色管理
           <div>{this.roleName}</div>
          <Button type="primary" style={{marginTop:10,300}}  onClick={this.handleTestClick}>测试</Button>
          </div>
        );
      }
    }
    export default UserRole;
     

    4、点击测试,可以看到不用从新对state赋值,即可自动渲染

     

     5、如果不使用mobx,须使用setState才能实现类似效果,比较麻烦。代码如下

    import React from 'react';
    import { observer} from 'mobx-react';
    import { decorate,observable, computed, action} from 'mobx';
    import { Button,Input} from 'antd';
    class UserRole extends React.Component { 
      
      constructor(props) {
        super(props);
        this.state={
          roleName:'test'
        }
      };
      state:{
        roleName
      };
      handleTestClick = e => {
        this.setState({
          roleName:'234'
        });
        console.log(this.state.roleName);
      };
      render() {
        return (
          <div>角色管理
           <div>{this.state.roleName}</div>
          <Button type="primary" style={{marginTop:10,300}}  onClick={this.handleTestClick}>测试</Button>
          </div>
        );
      }
    }
    
    export default UserRole;

     6、测试使用@compute

    import React from 'react';
    import { observer} from 'mobx-react';
    import { decorate,observable, computed, action} from 'mobx';
    import { Button,Input} from 'antd';
    @observer
    class UserRole extends React.Component { 
      
      constructor(props) {
        super(props);
      };
      @observable  
      roleName = "123";
      @computed get roleNameInfo()
      {
        return "roleName"+this.roleName;
      }
      handleTestClick = e => {
        this.roleName="234";
        console.log(this.roleName);
      };
      render() {
        return (
          <div>角色管理
          <div>{this.roleNameInfo}</div>
          <div>{this.roleName}</div>
          <Button type="primary" style={{marginTop:10,300}}  onClick={this.handleTestClick}>测试</Button>
          </div>
        );
      }
    }
    
    export default UserRole;

     也会自动Render

    7、使用严格模式

    import {observable, action, useStrict} from 'mobx';
    useStrict(true);

    在新版本中已经不能使用,估计是容易误解吧,代码如下

    import { observable, action,configure } from 'mobx';
    configure({enforceActions:true});

    开启严格模式后

    this.roleName="234";
    这种操作会报错,必须放在@action 修饰的函数中才可以。mobx 4.x中变化

    https://github.com/mobxjs/mobx/wiki/Migrating-from-mobx-3-to-mobx-4#things-that-just-have-moved
     
    8、重构项目目录如下

     9、可以两个页面组件共享一个State。

    User.jsx中增加代码

    import userRoleState from '../userrole/stores/UserRoleState';
    render中添加
    <div>{userRoleState.secend}</div>
    事件中增加
    userRoleState.add();
     

     两个值会同步改变。


  • 相关阅读:
    最大生成树与最小生成树
    有限制的最短路spfa+优先队列
    KM算法(最优匹配)
    网络最大流解方程组
    网络费用流-最小k路径覆盖
    树链剖分-点的分治(点数为k且距离最长的点对)
    树链剖分-点的分治(链的点的个数为k的点对数)
    树链剖分-点的分治(dis[i]+dis[j]==k的点对数量)
    树链剖分-点的分治(dis[i]+dis[j]<=k的点对数量)
    无向图欧拉通路
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/12274953.html
一二三 - 开发者的网上家园