前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React MobX 开始

React MobX 开始

作者头像
GoCoding
发布2021-12-30 18:49:05
1.1K0
发布2021-12-30 18:49:05
举报
文章被收录于专栏:GoCoding

MobX[1] 用于状态管理,简单高效。本文将于 React 上介绍如何开始,包括了:

  • 了解 MobX 概念
  • 从零准备 React 应用
  • MobX React.FC 写法
  • MobX React.Component 写法

可以在线体验:https://ikuokuo.github.io/start-react ,代码见:https://github.com/ikuokuo/start-react 。

概念

首先,ui 是由 state 通过 fn 生成:

代码语言:javascript
复制
ui = fn(state)

在 React 里, fn 即组件,依照自己的 state 渲染。

如果 state 是共享的,一处状态更新,多处组件响应呢?这时就可以用 MobX 了。

MobX 数据流向如下:

代码语言:javascript
复制
      ui
    ↙    ↖
action → state

ui 触发 action,更新 state,重绘 ui。注意是单向的。

了解更多,请阅读 MobX 主旨[2] 。这里讲下实现时的主要步骤:

  • 定义数据存储类 Data Store
    • 成员属性为 state,成员函数为 action
    • mobx 标记为 observable
  • 定义 Stores Provider
    • 方式一 React.ContextcreateContext 包装 Store 实例,ui useContext 使用
    • 方式二 mobx-react.Provider:直接包装 Store 实例,提供给 Providerui inject 使用
  • 实现 ui 组件
    • mobx 标记为 observer
    • 获取 stores,直接引用 state
    • 若要更新 state,间接调用 action

项目结构上就是多个 stores 目录,定义各类 storestate action,异步操作也很简单。了解更多,请阅读:

  • 定义数据存储[3]
  • 异步 actions[4]

准备

React App

代码语言:javascript
复制
yarn create react-app start-react --template typescript
cd start-react

React Router

路由库,以便导航样例。

代码语言:javascript
复制
yarn add react-router-dom

Antd

组件库,以便布局 UI。

代码语言:javascript
复制
yarn add antd @ant-design/icons

高级配置[5]

代码语言:javascript
复制
yarn add @craco/craco -D
yarn add craco-less

craco.config.js 配置了深色主题:

代码语言:javascript
复制
const path = require('path');
const CracoLessPlugin = require('craco-less');
const { getThemeVariables } = require('antd/dist/theme');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: getThemeVariables({
              dark: true,
              // compact: true,
            }),
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  webpack: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
};

ESLint

VSCode 安装 ESLint Prettier 扩展。初始化 eslint

代码语言:javascript
复制
$ npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript

配置 .eslintrc.js .eslintignore .vscode/settings.json,详见代码。并于 package.json 添加:

代码语言:javascript
复制
"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern node_modules/"
},

执行 yarn lint 通过, yarn start 运行。

到此, React Antd 应用就准备好了。初始模板如下,可见首个提交:

MobX

代码语言:javascript
复制
yarn add mobx mobx-react

mobx-react 包含了 mobx-react-lite,所以不必安装了。

  • 如果只用 React.FC (HOOK) 时,用 mobx-react-lite 即可。
  • 如果要用 React.Component (Class) 时,用 mobx-react 才行。

mobx-react-lite 与 React.FC

定义 Data Stores

makeAutoObservable

定义数据存储模型后,于构造函数里调用 makeAutoObservable(this) 即可。

stores/Counter.ts:

代码语言:javascript
复制
import { makeAutoObservable } from 'mobx';

class Counter {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increase() {
    this.count += 1;
  }

  decrease() {
    this.count -= 1;
  }
}

export default Counter;
React.Context Stores

React.Context 可以很简单的传递 Stores

stores/index.ts:

代码语言:javascript
复制
import React from 'react';

import Counter from './Counter';
import Themes from './Themes';

const stores = React.createContext({
  counter: new Counter(),
  themes: new Themes(),
});

export default stores;

创建一个 useStoresHook,简化调用。

hooks/useStores.ts:

代码语言:javascript
复制
import React from 'react';
import stores from '../stores';

const useStores = () => React.useContext(stores);

export default useStores;

Pane 组件,使用 Stores

组件用 observer 包装,useStores 引用 stores

Pane.tsx:

代码语言:javascript
复制
import React from 'react';
import { Row, Col, Button, Select } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite';

import useStores from './hooks/useStores';

type PaneProps = React.HTMLProps<HTMLDivElement> & {
  name?: string;
}

const Pane: React.FC<PaneProps> = ({ name, ...props }) => {
  const stores = useStores();

  return (
    <div {...props}>
      {name && <h2>{name}</h2>}
      <Row align="middle">
        <Col span="4">Count</Col>
        <Col span="4">{stores.counter.count}</Col>
        <Col>
          <Button
            type="text"
            icon={<PlusOutlined />}
            onClick={() => stores.counter.increase()}
          />
          <Button
            type="text"
            icon={<MinusOutlined />}
            onClick={() => stores.counter.decrease()}
          />
        </Col>
      </Row>
      {/* ... */}
    </div>
  );
};

Pane.defaultProps = { name: undefined };

export default observer(Pane);

mobx-react 与 React.Component

定义 Data Stores

makeObservable + decorators

装饰器在 MobX 6 中放弃了,但还可使用。

首先,启用装饰器语法[6]TypeScripttsconfig.json 里启用:

代码语言:javascript
复制
"experimentalDecorators": true,
"useDefineForClassFields": true,

定义数据存储模型后,于构造函数里调用 makeObservable(this)。在 MobX 6 前不需要,但现在为了装饰器的兼容性必须调用。

stores/Counter.ts:

代码语言:javascript
复制
import { makeObservable, observable, action } from 'mobx';

class Counter {
  @observable count = 0;

  constructor() {
    makeObservable(this);
  }

  @action
  increase() {
    this.count += 1;
  }

  @action
  decrease() {
    this.count -= 1;
  }
}

export default Counter;
Root Stores

组合多个 Stores

stores/index.ts:

代码语言:javascript
复制
import Counter from './Counter';
import Themes from './Themes';

export interface Stores {
  counter: Counter;
  themes: Themes;
}

const stores : Stores = {
  counter: new Counter(),
  themes: new Themes(),
};

export default stores;

父组件,提供 Stores

父组件添加 mobx-react.Provider,并且属性扩展 stores

index.tsx:

代码语言:javascript
复制
import React from 'react';
import { Provider } from 'mobx-react';
import stores from './stores';

import Pane from './Pane';

const MobXCLS: React.FC = () => (
  <div>
    <Provider {...stores}>
      <h1>MobX with React.Component</h1>
      <div style={{ display: 'flex' }}>
        <Pane name="Pane 1" style={{ flex: 'auto' }} />
        <Pane name="Pane 2" style={{ flex: 'auto' }} />
      </div>
    </Provider>
  </div>
);

export default MobXCLS;

Pane 组件,注入 Stores

组件用 observer 装饰,同时 inject 注入 stores

Pane.tsx:

代码语言:javascript
复制
import React from 'react';
import { Row, Col, Button, Select } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { observer, inject } from 'mobx-react';

import { Stores } from './stores';

type PaneProps = React.HTMLProps<HTMLDivElement> & {
  name?: string;
};

@inject('counter', 'themes')
@observer
class Pane extends React.Component<PaneProps, unknown> {
  get injected() {
    return this.props as (PaneProps & Stores);
  }

  render() {
    const { name, ...props } = this.props;
    const { counter, themes } = this.injected;

    return (
      <div {...props}>
        {name && <h2>{name}</h2>}
        <Row align="middle">
          <Col span="4">Count</Col>
          <Col span="4">{counter.count}</Col>
          <Col>
            <Button
              type="text"
              icon={<PlusOutlined />}
              onClick={() => counter.increase()}
            />
            <Button
              type="text"
              icon={<MinusOutlined />}
              onClick={() => counter.decrease()}
            />
          </Col>
        </Row>
        <Row align="middle">
          <Col span="4">Theme</Col>
          <Col span="4">{themes.currentTheme}</Col>
          <Col>
            <Select
              style={{ width: '60px' }}
              value={themes.currentTheme}
              showArrow={false}
              onSelect={(v) => themes.setTheme(v)}
            >
              {themes.themes.map((t) => (
                <Select.Option key={t} value={t}>
                  {t}
                </Select.Option>
              ))}
            </Select>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Pane;

最后

MobX 文档可以浏览一遍,了解有哪些内容。未涉及的核心概念还有 Computeds[7], Reactions[8]

其中 MobX and React 一节,详解了于 React 中的用法及注意点,见:React 集成[9]React 优化[10]

脚注

[1]MobX: https://mobx.js.org/

[2]MobX 主旨: https://zh.mobx.js.org/the-gist-of-mobx.html

[3]定义数据存储: https://zh.mobx.js.org/defining-data-stores.html

[4]异步 actions: https://zh.mobx.js.org/actions.html#%E5%BC%82%E6%AD%A5-actions

[5]高级配置: https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

[6]启用装饰器语法: https://zh.mobx.js.org/enabling-decorators.html

[7]Computeds: https://zh.mobx.js.org/computeds.html

[8]Reactions: https://zh.mobx.js.org/reactions.html

[9]React 集成: https://zh.mobx.js.org/react-integration.html

[10]React 优化: https://zh.mobx.js.org/react-optimizations.html

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 GoCoding 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概念
  • 准备
    • React App
      • React Router
        • Antd
          • ESLint
            • MobX
            • mobx-react-lite 与 React.FC
              • 定义 Data Stores
                • makeAutoObservable
                • React.Context Stores
              • Pane 组件,使用 Stores
              • mobx-react 与 React.Component
                • 定义 Data Stores
                  • makeObservable + decorators
                  • Root Stores
                • 父组件,提供 Stores
                  • Pane 组件,注入 Stores
                  • 最后
                    • 脚注
                    相关产品与服务
                    数据保险箱
                    数据保险箱(Cloud Data Coffer Service,CDCS)为您提供更高安全系数的企业核心数据存储服务。您可以通过自定义过期天数的方法删除数据,避免误删带来的损害,还可以将数据跨地域存储,防止一些不可抗因素导致的数据丢失。数据保险箱支持通过控制台、API 等多样化方式快速简单接入,实现海量数据的存储管理。您可以使用数据保险箱对文件数据进行上传、下载,最终实现数据的安全存储和提取。
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档