Mobx React ' autorun '在每次更改时调用更多次数

Question

我设置了一个简单的应用程序商店，只有一个数字值，每次点击按钮都会增加这个值。我的UI很简单:一个单一的应用程序<div>，它包含一个MyChild组件，它渲染一个增量按钮旁边的数字。

应用程序的autorun似乎行为正确，但每次我增加的值，MyChild的autorun火灾额外的时间，即在页面加载它火灾一次。如果我点击这个按钮，它会触发两次。我再次点击，它会触发3次，以此类推。我期望在每个增量上，autorun将触发一次。我遗漏了什么?

代码可在CodeSandbox上获得这里也是:

import "./styles.css";
import * as React from "react";
import { observer } from "mobx-react-lite";
import { action, autorun, makeAutoObservable } from "mobx";
class AppStore {
v;
constructor() {
this.v = 0;
makeAutoObservable(this);
}
}
const appStore = new AppStore();
const MyChild = observer(() => {
console.log("MyChild render", appStore.v);
autorun(() => { // <------------------------ this gets fired extra times
console.log("mychild autorun " + appStore.v);
});
return (
<div style={{ backgroundColor: "lightBlue" }}>
mychild {appStore.v}
{": "}
<button
onClick={action(() => {
appStore.v += 1;
})}
>
INC
</button>
</div>
);
});
export default observer(function App() {
console.log("app render");
autorun(() => {
console.log("app autorun " + appStore.v);
});
return (
<>
<div style={{ backgroundColor: "gray", padding: "10px" }}>
main
<MyChild />
</div>
</>
);
})

Answer 1

我已经找到了原因(我是新的Mobx-React，猜我应该已经弄清楚了)根据这个技巧，我需要在useEffect中设置autorun，这发生在第一次渲染时。我把所有的自动运行设置为:

React.useEffect(() => {
return autorun(...);
}, []);

，现在他们被触发一次渲染。