不使用useLocalObservable的观察者

Question

import { Observer, useLocalObservable } from 'mobx-react-lite';

function App() {
  const { count, decrement, increment } = useLocalObservable(() => ({
    count: 0,
    increment() { this.count++ },
    decrement() { this.count-- },
  }));

  return (
    <div>
      <Observer>{() => (<div>{count}</div>)}</Observer>
      <button onClick={() => { decrement() }} >decrement</button>
      <button onClick={() => { increment() }} >increment</button>
    </div>
  );
}

观察者不使用useLocalObservable.when我点击按钮什么都没有更新。原因是什么？

Answer 1

Observer跟踪其内部所有可观察到的数据，并在该可观测数据发生变化时重新呈现。当您从可观察到的count外部取消引用Observer时，从那时起，它只是一个常规的JavaScript数，因此Observer没有什么可跟踪的。

相反，您可以在Observer中取消它的引用，它将工作：

import { Observer, useLocalObservable } from 'mobx-react-lite';

function App() {
  const state = useLocalObservable(() => ({
    count: 0,
    increment() { state.count++ },
    decrement() { state.count-- },
  }));

  return (
    <div>
      <Observer>{() => <div>{state.count}</div>}</Observer>
      <button onClick={state.decrement}>decrement</button>
      <button onClick={state.increment}>increment</button>
    </div>
  );
}