Создайте новый экземпляр хранилища MobX для компонента функции React

Question

При использовании MobX с React вы можете создать новый экземпляр Store для экземпляра компонента класса, например:

const { extendObservable } = mobx;
const { Observer } = mobxReact;

class Store {
  constructor() {
    console.log("Created a store");
    extendObservable(this, {
      count: 0
    });
  }
}

class App extends React.Component {
  store = new Store();

  render() {
    const { store } = this;

    return (
      <Observer>
        {() => <button onClick={() => ++store.count}>{store.count}</button>}
      </Observer>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/mobx@5.9.0/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/mobx-react-lite@1.0.1/dist/index.min.js"></script>

<div id="root"></div>

При преобразовании этого в компонент функции он все еще работает, но новый экземпляр Store создается при каждом рендеринге, который не будет использоваться.Это не только расточительно, но может иметь нежелательное поведение, если конструктор содержит дополнительную логику.

const { extendObservable } = mobx;
const { observer, useObservable } = mobxReact;

class Store {
  constructor() {
    console.log("Created a store");
    extendObservable(this, {
      count: 0
    });
  }
}

const App = observer(() => {
  const store = useObservable(new Store());
  
  return <button onClick={() => ++store.count}>{store.count}</button>
});

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/mobx@5.9.0/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/mobx-react-lite@1.0.1/dist/index.min.js"></script>

<div id="root"></div>

Можно ли просто создать один экземпляр Store при первом рендеринге в компоненте функции?

Answer 1

Вместо использования хука useObservable мы можем использовать хук useState с функцией, которая возвращает новый Store в качестве аргумента.Эта функция будет вызываться только один раз при первом рендеринге, что позволит создать только один экземпляр Store.

const { useState } = React;
const { extendObservable } = mobx;
const { observer, useObservable } = mobxReact;

class Store {
  constructor() {
    console.log("Created a store");
    extendObservable(this, {
      count: 0
    });
  }
}

const App = observer(() => {
  const [store] = useState(() => new Store());
  
  return <button onClick={() => ++store.count}>{store.count}</button>
});

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/mobx@5.9.0/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/mobx-react-lite@1.0.1/dist/index.min.js"></script>

<div id="root"></div>