为 React 函数组件创建一个新的 MobX 存储实例答案

【问题标题】：Create a new MobX store instance for a React function component为 React 函数组件创建一个新的 MobX 存储实例
【发布时间】：2019-02-21 08:23:54
【问题描述】：

将 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 实例？

【问题讨论】：

标签： javascript reactjs mobx mobx-react

【解决方案1】：

我们可以使用useState 钩子而不是使用useObservable 钩子，该函数返回一个新的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>

【讨论】：