MOBX REACT“ AUTORUN”在每次更改中呼叫更多次

Question

我已经设置了一个具有单个数字值的简单应用程序存储，我在每次按钮时都会增加该数字值。我的UI很简单：一个单个应用＆lt; div＆gt;包含一个mychild组件，该组件呈现增量按钮旁边的数字。

应用程序的autorun似乎行为正确，但是每次我增加值时，mychild's autorun autorun fir 。如果我单击该按钮，它将发射两次。我再次单击，它发射了3次，依此类推。我希望每次增量，autorun会发射一次。我在这里想念什么？

代码可在

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反应的新手，猜想我应该弄清楚）
根据 this提示，我需要设置autorunoorun在第一次渲染上发生的使用。我将所有的自动运输更改为：

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

现在每次渲染一次都会被解雇。