react+mobx使用心得

 

react+mobx使用心得

mobx使用

配置编译器装饰器 第一步：npm run eject 配置文件释放出来，会在package.json文件内出现一个bable的配置项 第二步：package.json配置bable字段 下载 @babel/plugin-proposal-decorators 插件 "babel":{ "presets":{ "react-app" }, "plugins":[ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] } 第三步：重启项目

在项目得类组件中使用mobx

• 下载mobx插件 npm i mobx -D 1>在store文件夹下，使用mobxc的observable装饰器，定义可观察的状态

  import {observable,action} from "mobx"
    class user{
        @observable isLogin="xxx"//这个是数据，也相当于可以观察的数据
        @action//这个是创作的地方，也可以写请求，可以直接修改数据由@abservable声明的都是可观察数据
        login(){
  
        }
    }

  下载 npm i mobx-react 2> 在组件的根目录中，使用mobx-react的Provider的组件给子组件提供仓库 3>使用mobx-react的observer把党建组件变成可观察的（创库状态更新之后，组件会理解更新） 4>使用mobx-react的inject方法，想组件内注入指定的状态，会把状态注入到组件的props

  类组件的使用 - store组件（创库） >
  import {observable, computed, action} from 'mobx'; class userStoreClass { @observable user = { name: 'admin', role: '管理员' }; count = 0; @computed get userName(){ return this.user.name; } @action changeUser(){ if(this.count % 2 === 1){ this.user = { name: 'admin', role: '管理员' }; }else{ this.user.name = 'guest'; this.user.role = '访客'; this.user.isGuest = 'true'; } this.count ++; } } const userStore = new userStoreClass(); export default userStore; > - 根目录使用Prvider > import React from 'react'; import ReactDOM from 'react-dom'; import {configure} from 'mobx'; import {Provider} from 'mobx-react'; import userStore from './models/userStore'; import App from './components/App'; // 状态始终需要通过动作来更新(实际上还包括创建) configure({'enforceActions': 'always'}); ReactDOM.render(( ), document.getElementById('container')); > - 多个仓库组件 > const stores = { mainStore, userStore, commonStore }; ReactDOM.render(( ), document.getElementById('container')); > - @inject使用方法 > import React, {Component} from 'react'; import {inject, observer} from 'mobx-react'; import {Button} from 'antd'; import './style.css'; @inject( 'userStore') @observer export default class User extends Component{ constructor(props){ super(props); this.state = {}; } render(){ // 可以以this.props.userStore形式获取store内state const {user} = this.props.userStore; // 以.形式使用对象的属性值 return(

  name：{user.name}

  role：{user.name}

  {user.isGuest ? isGuest：${user.isGuest} : ''}

  this.props.userStore.changeUser()}>Change User

  ); } } > > >在项目的函数式组件内使用mobx

   

  • 下载mobx

  1）在store文件夹下，使用mobx的observerable装饰器，定义可观察的状态

  • 下载mobx-react-lite

  2)react内的createContext的方法创建上下文对象，把store作为上下文对象的初始值

  import {createContext} from 'react'; import store from '../store/';

  let storeContext = createContext(store); //创建上下文对象

  export default storeContext

  3)在组件内，使用useContext取上文对象的初始值（store）

如看不懂本人所写，可以看本人学习地方---https://www.cnblogs.com/0616--ataozhijia/p/10192700.html

#### mobx使用

> 配置编译器装饰器

    第一步：npm run eject 

            配置文件释放出来，会在package.json文件内出现一个bable的配置项

    第二步：package.json配置bable字段

        下载 @babel/plugin-proposal-decorators 插件

        "babel":{

            "presets":{

                "react-app"

            },

            "plugins":[

                [

                    "@babel/plugin-proposal-decorators",

                    {

                    "legacy": true

                    }

                ]

            ]

        }

    第三步：重启项目

>

>在项目得类组件中使用mobx

- 下载mobx插件

    npm i mobx -D

    1>在store文件夹下，使用mobxc的observable装饰器，定义可观察的状态

    >  

        import {observable,action} from "mobx"

        class user{

            @observable isLogin="xxx"//这个是数据，也相当于可以观察的数据

            @action//这个是创作的地方，也可以写请求，可以直接修改数据由@abservable声明的都是可观察数据

            login(){

            }

        }

    >

    下载 npm i mobx-react

    2>  在组件的根目录中，使用mobx-react的Provider的组件给子组件提供仓库

    3>使用mobx-react的observer把党建组件变成可观察的（创库状态更新之后，组件会理解更新）

    4>使用mobx-react的inject方法，想组件内注入指定的状态，会把状态注入到组件的props

    >类组件的使用

    - store组件（创库）

        >   

        import {observable, computed, action} from 'mobx';

        class userStoreClass {

            @observable user = {

            name: 'admin',

            role: '管理员'

            };

            count = 0;

            @computed get userName(){

                return this.user.name;

            }

            @action changeUser(){

            if(this.count % 2 === 1){

                this.user = {

                    name: 'admin',

                    role: '管理员'

                };

            }else{

                this.user.name = 'guest';

                this.user.role = '访客';

                this.user.isGuest = 'true';

            }

            this.count ++;

            }

        }

        const userStore = new userStoreClass();

        export default userStore;

        >

    - 根目录使用Prvider

        >

        import React from 'react';

        import ReactDOM from 'react-dom';

        import {configure} from 'mobx';

        import {Provider} from 'mobx-react';

        import userStore from './models/userStore';

        import App from './components/App';

        // 状态始终需要通过动作来更新(实际上还包括创建)

        configure({'enforceActions': 'always'});

        ReactDOM.render((

            <Provider store={userStore}}>

                <App />

            Provider>

        ), document.getElementById('container'));

        >

    - 多个仓库组件

        >

        const stores = {

        mainStore, userStore, commonStore

        };

        ReactDOM.render((

            <Provider {...stores}>

                <App />

            Provider>

        ), document.getElementById('container'));

        >

    - @inject使用方法

        >

        import React, {Component} from 'react';

        import {inject, observer} from 'mobx-react';

        import {Button} from 'antd';

        import './style.css';

        @inject( 'userStore')

        @observer

        export default class User extends Component{

            constructor(props){

                super(props);

                this.state = {};

            }

            render(){

            // 可以以this.props.userStore形式获取store内state

                const {user} = this.props.userStore;

            // 以.形式使用对象的属性值

                return(

                    <div className='user'>

                        <div className='user_list'>name：{user.name}div>

                        <div className='user_list'>role：{user.name}div>

                        <div className='user_list'>{user.isGuest ? `isGuest：${user.isGuest}` : ''}div>

                        <Button type='primary' onClick={() => this.props.userStore.changeUser()}>Change UserButton>

                    div>

                );

            }

        }

        >

    >

    >在项目的函数式组件内使用mobx

    - 下载mobx

    1）在store文件夹下，使用mobx的observerable装饰器，定义可观察的状态

    - 下载mobx-react-lite

    2)react内的createContext的方法创建上下文对象，把store作为上下文对象的初始值

    import {createContext} from 'react';

    import store from '../store/';

    let storeContext = createContext(store);  //创建上下文对象

    export default storeContext

    3)在组件内，使用useContext取上文对象的初始值（store）

>   

如看不懂本人所写，可以看本人学习地方---https://www.cnblogs.com/0616--ataozhijia/p/10192700.html