为什么我可以在 mobx 严格模式下不采取任何操作来修改状态？

Question

我从 mobx 包中导入 configure 并应用 enforceActions 为真。现在，如果 mobx 状态在没有操作的情况下被修改，组件将不会重新渲染。

但是无论何时，我在 mobx 状态下单击任一按钮来增加或减少计数时，都不会收到错误消息。

import React from 'react';
import ReactDOM from 'react-dom';
import { observable, configure } from 'mobx';
import { observer } from 'mobx-react';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
configure({ enforceActions: true }); // components won't re-render if state is modified without action

const appState = observable({
  count: 0,
  incCount: () => {
    appState.count += 1;
  },
  decCount: () => {
    appState.count -= 1;
  },
});

const Counter = observer((props) => (
  <section>
    {props.appState.count}
    <div>
      <button onClick={props.appState.incCount}>Add</button>
      <button onClick={props.appState.decCount}>Dec</button>
    </div>
  </section>
));

ReactDOM.render(
  <React.StrictMode>
    <Counter appState={appState} />
  </React.StrictMode>,
  document.getElementById('root')
);

为什么我没有看到一条错误消息，指出常规函数无法修改状态而只有操作可以？

我的github

Answer 1

在您的示例中，

incCount 和 decCount 会自动变成 action。

您作为参数提供给 observable 的源对象将被克隆并使其所有成员都可观察。任何 geter 将被注释为 computed，任何包含函数值的成员将被注释为 autoAction（即变成 action）。

例子

const appState = observable({
  // observable
  count: 0,
  // computed
  get doubleCount() {
    return appState.count * 2;
  },
  // actions
  incCount: () => {
    appState.count += 1;
  },
  decCount: () => {
    appState.count -= 1;
  },
});

为什么我可以在 mobx 严格模式下不采取任何操作来修改状态？

Why can I modify state without action in mobx strict mode?

mobx