gpt4 book ai didi

mobx - 为什么 mobx 需要 Action ,为什么不只是将所有突变批处理到 setImmediate 中?

转载 作者:行者123 更新时间:2023-12-04 21:19:43 28 4
gpt4 key购买 nike

我开始学习 mobx,我不明白为什么 mobx 发明了“ Action ”实体。将所有更改批处理到 setImmediate 中的下一个刻度会更容易吗?这将自动使所有同步状态更改以与@action 现在相同的方式运行。在 Action 完成后而不是在下一个刻度内立即触发观察者是否有任何好处?

最佳答案

根据来自 https://github.com/mobxjs/mobx/issues/1523 的对话:

  • setImmediate 仅在 IE 和 Nodejs 中实现。 setTimeout(fn, 0) 会导致 4 ms 延迟
  • https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8 :异步更新不会有这么好的堆栈跟踪来找到谁触发了该更新
  • React 仅批处理来自事件监听器的 setState 调用,mobx-react Couple 也是如此。这意味着 React 组件不会在突变后立即重新渲染,它只会在事件监听器回调后同步更新。

  • 几个例子(所有 jsx 组件都应该在 @observer 内):
    // Ok to do this
    <input value={appState.name} onChange={e => appState.name = e.target.value}/>


    // Ok too, will rerender only once
    <input value={appState.name} onChange={e => {
    appState.name = e.target.value;
    appState.foo = appState.foo + 1;
    }}/>


    // Not very good, will rerender twice on each click.
    // Nevertheless, I do not know why someone will do this
    <button onClick={() => {
    setTimeout(() => {
    appState.foo = appState.foo + 1;
    appState.bar = appState.bar + 10;
    }, 0);
    }}>Click me foo={appState.foo} bar={appState.bar}</button>


    // But that way it will rerender once and show console output only once too
    autorun(() => console.info(`App state foo={appState.foo} bar={appState.bar}`));
    <button onClick={() => {
    setTimeout(() => {
    runInAction(() => {
    appState.bar = appState.bar + 10;
    appState.foo = appState.foo + 1;
    })
    }, 0);
    }}>Click me foo={appState.foo} bar={appState.bar}</button>


    // That code will show console output twice, but rerender only once
    autorun(() => console.info(`App state foo={appState.foo} bar={appState.bar}`));
    <button onClick={() => {
    setTimeout(() => {
    ReactDOM.unstable_batchedUpdates(() => {
    appState.bar = appState.bar + 10;
    appState.foo = appState.foo + 1;
    })
    }, 0);
    }}>Click me foo={appState.foo} bar={appState.bar}</button>

    关于mobx - 为什么 mobx 需要 Action ,为什么不只是将所有突变批处理到 setImmediate 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50052219/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com