将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/[email protected]/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>
<div id="root"></div>
有没有办法在函数组件中的第一个渲染上创建一个单独的Store
实例?
我们可以使用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/[email protected]/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>
<div id="root"></div>