npm包react-mobx-supermodel使用教程

React-Mobx-Supermodel 是一个 React 组件和 Mobx 类库，旨在帮助您快速构建一个数据模型，用于管理应用程序和页面的状态。本文章将为你详细介绍 React-Mobx-Supermodel 的安装、使用和示例代码。

介绍

React-Mobx-Supermodel 由 Matt Ruby 开发， 使用 TypeScript 编写，继承自 Mobx 和 Supermodel 库。该库封装了 Supermodel 层，是一种使你的 React 应用程序更具逻辑性的方法。

安装

您可以通过使用 npm 或 yarn 安装 React-Mobx-Supermodel

npm i react-mobx-supermodel --save

或者

yarn add react-mobx-supermodel

使用

React-Mobx-Supermodel 需要一个 model 类来定义数据结构和处理逻辑，可以使用 ES6 类或 TypeScript class。然后，您可以使用 ProvideStores 组件来使您的应用程序和页面中的组件可以访问模型实例。

import React, {Component} from 'react'
import {ProvideStores} from 'react-mobx-supermodel'

import {AppModel} from './models/AppModel'

export default class App extends Component {
    render() {
        return (
            <ProvideStores models={[AppModel]}>
                <div>Hello World</div>
            </ProvideStores>
        )
    }
}

您可以使用 supermodel 封装的 Collection 或 Model，来要求您定义数据模型。

import {Collection, Model} from 'react-mobx-supermodel'

export class UserModel extends Model {
    static defaults = {
        id: null,
        name: '',
    }

    get nameWithPrefix() {
        return `User ${this.name}`
    }
}

export class UserCollection extends Collection {
    static ModelType = UserModel
}

现在您可以在组件中访问模型数据和方法。

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

@inject('UserCollection')
@observer
export default class UserList extends Component {
    render() {
        const {UserCollection} = this.props;
        const {models} = UserCollection;

        return (
            <ul>
                {models.map(user =>
                    <li key={user.id}>{user.nameWithPrefix}</li>
                )}
            </ul>
        )
    }
}

示例

以创建计数器为例，以下是一个简单的示例：

定义 CounterModel：

import {Model} from 'react-mobx-supermodel'

export default class CounterModel extends Model {
    static defaults = {
        count: 0,
    }

    increment() {
        this.setState({count: this.count + 1})
    }

    decrement() {
        this.setState({count: this.count - 1})
    }
}

创建 AppModel 用于包含 CounterModel:

import {Collection} from 'react-mobx-supermodel'
import CounterModel from './CounterModel'

export default class AppModel extends Collection {
    static ModelType = CounterModel
}

渲染应用程序：

import React, {Component} from 'react'
import {ProvideStores, inject, observer} from 'react-mobx-supermodel'
import AppModel from './models/AppModel'

@inject('AppModel')
@observer
export default class App extends Component {
    render() {
        const {AppModel} = this.props;
        const counter = AppModel.models[0];

        return (
            <ProvideStores models={[AppModel]}>
                <div>
                    <h1>Counter:</h1>
                    <p>{counter.count}</p>
                    <button onClick={() => counter.increment()}>Increment</button>
                    <button onClick={() => counter.decrement()}>Decrement</button>
                </div>
            </ProvideStores>
        )
    }
}

现在运行应用，可以看到一个简单的计数器。

结论

React-Mobx-Supermodel 是一个用于管理 React 应用程序和页面状态的强大、灵活和易于使用的工具。借助其提供的集合和模型类，您可以轻松地在应用程序和页面之间共享和传递数据并按需重新渲染组件。如果您需要使用数据模型来管理您的 React 应用程序，请考虑使用 React-Mobx-Supermodel。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e0fb81d47349e53d35