mobx-state-tree中model与props的区别是什么？

嘿，这个混淆太常见了！我刚上手MST的时候也把这俩搞混过，尤其是当和React结合使用的时候。其实它们完全是两个层面的东西，咱们拆开来说：

1. 本质定位完全不同 #

• Model（MST模型）：这是MobX-State Tree的核心，是用来定义应用状态的结构、行为和约束的容器。你可以把它理解成一个带逻辑的“数据蓝图”，里面包含了状态的初始值、修改状态的actions、派生状态的views等等。它是专门用来管理状态的，和UI组件没有直接绑定。
• Props（属性）：这是UI组件（比如React组件）的输入参数，属于UI框架的概念，不是MST自带的。Props是组件和外部通信的桥梁，用来接收外部传递过来的数据或回调，组件内部可以用这些props来渲染UI或者触发逻辑。

2. 作用范围与生命周期不同 #

• Model的生命周期和你的状态管理逻辑绑定：一个MST model实例会在应用启动、某个模块初始化时创建，它会一直存在直到你主动销毁，负责维护一段状态的完整性。
• Props的生命周期和组件绑定：组件挂载时接收props，更新时可能会接收新的props，卸载后props就跟着消失了。而且props是只读的（在React里），组件不能直接修改props，只能通过回调通知外部修改。

3. 在MST + React场景中的结合方式 #

举个代码例子你就明白了：
首先定义一个MST的Model：

import { types } from "mobx-state-tree";

const TodoModel = types.model("Todo", {
  id: types.identifier,
  title: types.string,
  completed: types.boolean
})
.actions(self => ({
  toggleCompleted() {
    self.completed = !self.completed;
  }
}));

// 创建model实例
const myTodo = TodoModel.create({ id: "1", title: "Learn MST", completed: false });

然后在React组件中，我们把这个model实例作为props传给组件：

import React from "react";
import { observer } from "mobx-react-lite";

// 组件接收todo（MST model实例）作为props
const TodoItem = observer(({ todo }) => {
  return (
    <div>
      <input 
        type="checkbox" 
        checked={todo.completed} 
        onChange={() => todo.toggleCompleted()} 
      />
      <span>{todo.title}</span>
    </div>
  );
});

// 使用组件时，把model实例传入props
<TodoItem todo={myTodo} />

这里你能看到：TodoModel是MST定义的状态模型，myTodo是它的实例；而todo是React组件TodoItem接收的props，这个props的值刚好是MST的model实例。

为什么你找不到MST中props的文档？ #

因为props根本不是MST的概念！它是React（或Vue等UI框架）的术语，MST的文档只会讲和状态管理相关的内容（model、store、actions、views等）。当你在MST场景中提到props，其实是在说“把MST的model实例作为UI组件的props传递”，这是两个工具结合的用法，不是MST本身的特性。

希望这个解释能帮你理清两者的区别！如果还有疑问，随时补充提问~

内容的提问来源于stack exchange，提问作者Lil E