react 状态管理mobx中的行为模式

看一段代码

import { configure } from "mobx"

configure({
  enforceActions: "never",  // 设置为 "never" 模式
})

这个是 store 中的配置

enforceActions 的三种模式

1. "never" (默认值)

configure({
  enforceActions: "never",  // 不强制使用 action
})

// 在任何地方都可以直接修改状态
class Store {
  count = 0
  
  // 不需要用 action 包装
  increment() {
    this.count++  // 直接修改，不会有警告
  }
  
  // 甚至可以在组件中直接修改
  // store.count++  // 这样也可以
}

2. "always"

configure({
  enforceActions: "always",  // 必须使用 action
})

class Store {
  count = 0
  
  // 必须用 action 包装
  increment = () => {
    this.count++  // 正确：在 action 中修改
  }
  
  // 如果直接修改会报错
  // store.count++  // 错误：不能在 action 外修改状态
}

3. "observed"

configure({
  enforceActions: "observed",  // 只在被观察的状态上强制
})

// 只有被 observer 组件观察的状态才需要 action

实际影响

使用 "never"（你的配置）

javascript

// 可以这样写
class CounterStore {
  count = 0
  
  // 普通方法
  increment() {
    this.count++  // 直接修改，没问题
  }
  
  // 异步操作
  async fetchData() {
    const data = await api.getData()
    this.data = data  // 直接赋值，没问题
  }
}

// 甚至在组件中也可以直接修改
const Counter = observer(() => {
  const { counterStore } = useStore()
  
  return (
    <button onClick={() => counterStore.count++}>  {/* 直接修改 */}
      {counterStore.count}
    </button>
  )
})

使用 "always"（严格模式）

javascript

// 必须这样写
class CounterStore {
  count = 0
  
  // 必须用 action
  increment = () => {
    this.count++
  }
  
  // 异步操作也要用 action
  fetchData = async () => {
    const data = await api.getData()
    runInAction(() => {
      this.data = data  // 必须在 action 中修改
    })
  }
}

// 组件中不能直接修改
const Counter = observer(() => {
  const { counterStore } = useStore()
  
  return (
    <button onClick={counterStore.increment}>  {/* 必须调用 action */}
      {counterStore.count}
    </button>
  )
})

为什么你的项目用 "never"？

优点

• 开发方便：不用处处写 action

• 代码简洁：直接修改状态

• 学习成本低：适合初学者

缺点

• 难以追踪状态变化：不知道哪里修改了状态

• 调试困难：状态变化没有明确的入口

• 不符合最佳实践

推荐做法

小型项目

javascript

// 可以用 "never"，开发快速
configure({
  enforceActions: "never",
})

中大型项目

javascript

// 推荐用 "always"，便于维护
configure({
  enforceActions: "always",
})

// 或者在开发环境用严格模式，生产环境用宽松模式
configure({
  enforceActions: process.env.NODE_ENV === "production" ? "never" : "always",
})

总结

你的配置 enforceActions: "never" 表示：

• 不强制使用 action 来修改状态

• 可以在任何地方直接修改状态

• 开发更自由灵活 ，但不利于维护

这是一个权衡：开发效率 vs 代码质量。对于快速开发的小项目，用 "never" 是可以接受的！