MobX 在 hook 中的使用

關於 mobX 在 react 16.8.0 以上的用法
以下例子均取自官網文檔

一般用法:

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

const Hooks = observer(() => {
  const todo = useLocalStore(() =>
    ({
      title: 'Click to toggle',
      done: false,
      toggle() {
        todo.done = !todo.done
      },
      get emoji() {
        return todo.done ? '😜' : '🏃'
      },
    }));

  return <div onClick={todo.toggle}>
      <h3>{todo.title} {todo.emoji}</h3>
    </div>
})

可以看到原來的修飾符@observer,
現在是使用 HOC 來進行擴展的;

還有另外的 2 種修飾方法:

1:

import { useLocalStore, useObserver } from 'mobx-react';

function Person() {
  const person = useLocalStore(() => ({ name: 'John' }))
  return useObserver(() => (
    <div>
      {person.name}
      <button onClick={() => (person.name = 'Mike')}>No! I am Mike</button>
    </div>
  ))
}

使用 useObserver(()=>JSX.Element) 方法取代 observer(()=>JSX.Element)

2:

import { Observer, useLocalStore } from 'mobx-react';

function ObservePerson() {
  const person = useLocalStore(() => ({ name: 'John' }))
  return (
    <div>
      {person.name} <i>I will never change my name</i>
      <div>
        <Observer>{() => <div>{person.name}</div>}</Observer>
        <button onClick={() => (person.name = 'Mike')}>
          I want to be Mike
        </button>
      </div>
    </div>
  )
}

使用部分渲染, 只有被 <Observer></Observer> 包裹的才能監聽到對應值的改變

優化,分離,傳值

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

function initialFn(source) {
  return ({
    count: 2,
    get multiplied() {
      return source.multiplier * this.count
    },
    inc() {
      this.count += 1
    },
  });
}

const Counter: FC<{ multiplier: number }> = observer(props => {

  const store = useLocalStore(
    initialFn,
    Object.assign({ a: 1 }, props),// 可以傳任意值
  );

  return (
    <div>
      <button id="inc" onClick={store.inc}>
        {`Count: ${store.count}`}
      </button>
      <span>{store.multiplied}</span>
    </div>
  )
})

這種分離的方法,基本已經耦合性已經很低了

2021.3.11 更新

之前 mobx 官方對於 api 又進行了修改,本文也做對應的修改

重要修改: useLocalStore 將要廢棄 !!
使用 useLocalObservable 替代, 而且他們的使用方案也不同:

import { useLocalObservable, Observer } from "mobx-react-lite"

const Todo = () => {
    const todo = useLocalObservable(() => ({
        title: "Test",
        done: true,
        toggle() {
            this.done = !this.done
        }
    }))

    return (
        <Observer>
            {() => (
                <h1 onClick={todo.toggle}>
                    {todo.title} {todo.done ? "[DONE]" : "[TODO]"}
                </h1>
            )}
        </Observer>
    )
}

可直接作為局部或者全局的變量存儲

const user = mobx.observable({
    name: "Noa"
})
const Todo = () => {
    return (
        <Observer>
            {() => (
                <h1>
                   {user.name}
                </h1>
            )}
        </Observer>
    )
}