mobx-react-lite 基於 React Hook API 輕量級狀態管理

Hook 簡介

官方原話：Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。

隨着 Hook API 的發佈，使得函數式組件生態也逐漸豐富起來，Github 上基於 Hook 封裝的組件庫也不斷增多。

今天就來說說 [mobx-react-lite](https://github.com/mobxjs/mobx-react-lite)，它是基於 React 16.8 和 Hooks 的 MobX 的輕量級React綁定。

這裏通過 mobx + mobx-react 與 mobx-react-lite + Context API 兩種使用方式對比說明

mobx的使用

1. 創建 store

// store.js
import {observable, action} from 'mobx';

class Store {
  @observable
  count = 0;

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

export default new Store();

2. 根組件通過 Provider 注入 store

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <CounterClass></CounterClass>
        <CounterFunction></CounterFunction>
      </div>
    </Provider>
  );
}

export default App;

3. 類組件（class）訪問 store

import React, { Component } from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx'; // 查看store中原始JavaScript數據結構

@inject('store')
@observer
class CounterClass extends Component {
  handleClick = () => {
    this.props.store.handleCount();
  };

  render() {
    console.log(toJS(this.props.store));
    return (
      <div>
        count: {this.props.store.count}
        <button onClick={this.handleClick}>add one</button>
      </div>
    )
  }
}

export default CounterClass;

4. 函數組件使用 store

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

const CounterFunction = ({store}) => {
  return (
    <div>
      <p>you clicked {store.count} times</p>
      <button onClick={() => store.handleCount()}>Add</button>
    </div>
  );
}

export default inject('store')(observer(CounterFunction));

mobx-react-lite 基於 Hook API 的使用

1. 創建 Counter store 組件

// HookStore.js
import React, {createContext} from 'react';
import {useLocalStore, observer} from 'mobx-react-lite';

export const MyContext = createContext(null);

export const Counter = observer((props) => {
  const store = useLocalStore(() => (
    {
      count: 1,
      get getCount() {
        return store.count;
      },
      handleCount() {
        store.count += 2;
      }
    }
  ));
  return (
    <MyContext.Provider value={store}>
      {props.children}
    </MyContext.Provider>
  );
});

2. 使用 Counter 組件，子組件是class類組件時，通過 MyContext.Consumer 訪問 store，函數組件通過 useContext Hook API 訪問 store

import React from 'react';
import {Counter} from './store/HookStore';
import './App.scss';

function App() {
  return (
    <div className="App">
      <Counter>
        <HookDemo01></HookDemo01>
        <ClassCom></ClassCom>
      </Counter>
    </div>
  );
}

export default App;

3. 類組件（class）連接 store

import React, { Component } from 'react';
import {Observer} from 'mobx-react-lite';
import {MyContext} from '../store/HookStore';
import {toJS} from 'mobx';

class CounterClass extends Component {
  render() {
    return (
      <div>
        <MyContext.Consumer>
          {
            store => {
              {/* 使用 Object.is 比較store是否發生變化，store的引用不變，導致不會重渲染，獲取最新依賴值需使用 Observer 組件 */}
              console.log('store: ', toJS(store));
              return (
                <>
                  <p>counter2: {store.count}</p> {/* 這種方式在 class 組件中無效，不會引發重渲染 */}
                  <Observer>{() => <p>counter2: {store.count}</p>}</Observer> {/* 必須這樣寫，Observer 組件是mobx-react-lite提供的唯一可在類組件中使用的組件 */}
                  <button onClick={() => store.handleCount()}>Counter Add</button>
                </>
              )
            }
          }
        </MyContext.Consumer>
      </div>
    )
  }
}

export default CounterClass;

4. 函數組件連接 store

import React, {useState, useEffect, useContext} from 'react'
import {Observer, observer} from 'mobx-react-lite';
import {MyContext} from '../../store/HookStore';

const CounterFunction = (props) => {
  const [num, setNum] = useState(10);
  const store = useContext(MyContext); // 當組件上層最近的 <MyContext.Provider> 更新時，該 Hook 會觸發重渲染，並使用最新傳遞給 MyContext provider 的 context value 值。

  useEffect(() => {
    console.log('num change', MyContext);
  }, [num]);

  return (
    <div>
      <p>num: {num}</p>
      <button onClick={() => setNum(num + 1)}>set num</button>

      {/* 深度監聽 store 變化並進行重渲染，導致下面兩行結果相同 */}
      <p>Count: {store.getCount}</p>
      <Observer>{() => <p>Count2: {store.getCount}</p>}</Observer>
      <button onClick={() => store.handleCount()}>Counter Add</button>
    </div>
  );
}

export default observer(CounterFunction);