MobX 用於狀態管理,簡單高效。本文將於 React 上介紹如何開始,包括了:
- 瞭解 MobX 概念
- 從零準備 React 應用
- MobX React.FC 寫法
- MobX React.Component 寫法
可以線上體驗: https://ikuokuo.github.io/start-react ,程式碼見: https://github.com/ikuokuo/start-react 。
概念
首先,ui
是由 state
通過 fn
生成:
ui = fn(state)
在 React 裡, fn
即元件,依照自己的 state
渲染。
如果 state
是共享的,一處狀態更新,多處元件響應呢?這時就可以用 MobX
了。
MobX
資料流向如下:
ui
↙ ↖
action → state
ui
觸發 action
,更新 state
,重繪 ui
。注意是單向的。
瞭解更多,請閱讀 MobX 主旨 。這裡講下實現時的主要步驟:
- 定義資料儲存類
Data Store
- 成員屬性為
state
,成員函式為action
- 用
mobx
標記為observable
- 成員屬性為
- 定義
Stores Provider
- 方式一
React.Context
:createContext
包裝Store
例項,ui
useContext
使用 - 方式二
mobx-react.Provider
:直接包裝Store
例項,提供給Provider
,ui
inject
使用
- 方式一
- 實現
ui
元件- 用
mobx
標記為observer
- 獲取
stores
,直接引用state
- 若要更新
state
,間接呼叫action
- 用
專案結構上就是多個 stores
目錄,定義各類 store
的 state
action
,非同步操作也很簡單。瞭解更多,請閱讀:
準備
React App
yarn create react-app start-react --template typescript
cd start-react
React Router
路由庫,以便導航樣例。
yarn add react-router-dom
Antd
元件庫,以便佈局 UI。
yarn add antd @ant-design/icons
高階配置,
yarn add @craco/craco -D
yarn add craco-less
craco.config.js
配置了深色主題:
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
:
$ 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
新增:
"scripts": {
"lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern node_modules/"
},
執行 yarn lint
通過, yarn start
執行。
到此, React Antd 應用就準備好了。初始模板如下,可見首個提交:
MobX
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
:
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
:
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;
建立一個 useStores
的 Hook
,簡化呼叫。
hooks/useStores.ts
:
import React from 'react';
import stores from '../stores';
const useStores = () => React.useContext(stores);
export default useStores;
Pane 元件,使用 Stores
元件用 observer
包裝,useStores
引用 stores
。
Pane.tsx
:
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
中放棄了,但還可使用。
首先,啟用裝飾器語法。TypeScript
於 tsconfig.json
裡啟用:
"experimentalDecorators": true,
"useDefineForClassFields": true,
定義資料儲存模型後,於建構函式裡呼叫 makeObservable(this)
。在 MobX 6
前不需要,但現在為了裝飾器的相容性必須呼叫。
stores/Counter.ts
:
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
:
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
:
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
:
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, Reactions。
其中 MobX and React
一節,詳解了於 React
中的用法及注意點,見:React 整合,React 優化。
GoCoding 個人實踐的經驗分享,可關注公眾號!