你已经看到如何在 Redux 和 Mobx 中更新 state 。它们是不同的,Redux 中 state 是只读的,你只能使用明确的 actions 来修改 state ,Mobx 则相反,state 是可读和写的,你可以不使用 actions 直接修改 state,但你可以 useStrict() 来使用明确的 actions 。
React 状态管理的学习曲线
React 应用广泛使用 Redux 和 Mobx 。但它们是独立的状态管理库,可以运用在除 React 的任何地方。它们的互操作库让我们能简单的连接React 组件。Redux + React 的 react-redux 和 MobX + React 的mobx-react 。稍后我会说明它俩如何在 React 组件树中使用。
在最近的讨论中,人们在争论 Redux 的学习曲线。这通常发生在下面的情境中:想使用 Redux 做状态管理的 React 初学者。大部分人认为 React 和 Redux 本身都有颇高的学习曲线,两者结合的话会失控。一个替代的选择就是 Mobx ,因为它更适合初学者。
然而,我会建议 React 的初学者一个学习状态管理的新方法。先学习React 组件内部的状态管理功能。在 React 应用,你首先会学到生命周期方法,而且你会用 setState() 和 this.state 解决本地的状态管理。我非常推荐上面的学习路径。不然你会在 React 的生态中迷失。在这条学习路径的最后,你会认识到组件内部管理状态难度越来越大。毕竟那是 The Road to learn React 书里如何教授 React 状态管理的方法。
现在我们重点讨论 Redux 和 Mobx 为我们解决了什么问题?它俩都提供了在组件外部管理应用状态的方法。state 与组件相互解耦,组件可以读取 state ,修改 state ,有新 state 时更新。这个 state 是单一数据源。
现在你需要选择其中一个状态管理库。这肯定是要第一时间解决的问题。此外,在开发过相当大的应用之后,你应该能很自如使用 React 。
初学者用 Redux 还是 Mobx ?
一旦你对 React 组件和它内部的状态管理熟悉了,你就能选择出一个状态管理库来解决你的问题。在我两个库都用过后,我想说 Mobx 更适合初学者。我们刚才已经看到 Mobx 只要更少的代码,甚至它可以用一些我们现在还不知道的魔法注解。
用 Mobx 你不需要熟悉函数式编程。像“不可变”之类的术语对你可能依然陌生。函数式编程是不断上升的范式,但对于大部分 JavaScript 开发者来说是新奇的。虽然它有清晰的趋势,但并非所有人都有函数式编程的背景,有面向对象背景的开发者可能会更加容易适应 Mobx 的原则。
注:Mobx 可以很好的在 React 内部组件状态管理中代替 setState,我还是建议继续使用 setState() 管理内部状态。但链接文章很清楚的说明了在 React 中用 Mobx 完成内部状态管理是很容易的。
规模持续增长的应用
在 Mobx 中你改变注解过的对象,组件就会更新。Mobx 比 Redux 使用了更多的内部魔法实现,因此在刚开始的时候只要更少的代码。有 Angular 背景的会觉得跟双向绑定很像。你在一个地方保存 state ,通过注解观察 state ,一旦 state 修改组件会自动的更新。
Mobx 允许直接在组件树上直接修改 state 。
// component <button onClick={() => store.users.push(user)} />
更好的方式是用 store 的 @action 。
// component <button onClick={() => store.addUser(user)} /> // store @action addUser = (user) => { this.users.push(user); }
用 actions 修改 state 更加明确。上面也提到过,有个小功能可以强制的使用 actions 修改 state 。
// root file import { useStrict } from 'mobx'; useStrict(true);