在前端开发中，Redux 已成为状态管理的重要工具。然而，开发人员也发现很多时候使用 Redux 过于繁琐，需要在很多地方手动编写繁琐的代码，才能完成最简单的状态管理。
为了解决这个问题，出现了一些高级库，如 Mobx 和 Reselect，它们提供了更简单、更高效的状态管理方式，并能够轻松实现复杂的状态管理逻辑。本文将详细介绍这两个库的常用规则与方法，并提供示例代码，帮助读者更好地理解和使用它们。
Mobx
Mobx 是一个用于状态管理的库，它允许您将状态声明为可观察对象，并自动跟踪状态对象的引用和使用，并确保对状态对象的修改能够自动触发相关的 UI 更新。在 Mobx 中，您只需要跟踪状态，而不需要编写任何复杂的代码，即可实现响应式 UI 的管理。以下是一些常见的 Mobx 辅助工具方法：
@observable
@observable 用于将属性声明为可观察的。一个被 @observable 修饰的属性会被 Mobx 跟踪其使用情况，以便在需要更新 UI 时自动触发更新。示例代码如下：
import { observable } from 'mobx';
class Todo {
@observable
title = 'Todo Title';
@observable
completed = false;
}@computed
@computed 用于声明一个派生属性，这个属性的值由其它可观察属性计算而来。当与其它可观察属性关联时，当这些可观察属性的值发生变化时，被 @computed 修饰的属性也会自动重新计算。示例代码如下：
-- -------------------- ---- -------
------ - ----------- -------- - ---- -------
----- -------- -
-----------
----- - ---
---------
--- -------------------- -
------ ------------------------ -- -------------- --- -------------
-
-@action
@action 用于声明一个函数为 Mobx 中的动作，这个函数用于修改可观察对象的值。在修改可观察对象时，必须使用 @action，否则 Mobx 会跟踪不到对象的变化。示例代码如下：
-- -------------------- ---- -------
------ - ----------- ------ - ---- -------
----- ------- -
-----------
----- - --
-------
----------- -
-------------
-
-------
----------- -
-------------
-
-autorun
autorun 函数会在可观察对象发生变化时自动执行处理函数，通常用于处理单一的变化刷新逻辑。示例代码如下：
-- -------------------- ---- -------
------ - ----------- ------- - ---- -------
--- ------- - ------------
------ --
----------- -
-------------
--
----------- -
-------------
--
---
---------- -- -
---------------------------
---
-------------------- -- -- -
-------------------- -- -- -Reselect
Reselect 是一个用于创建可记忆的选择器（selector）的库，它的作用类似于计算属性。与计算属性不同的是，Reselect 可以缓存选择器的结果，只有当选择器的参数实际改变时才重新计算结果。以下是 Reselect 的一些常见辅助工具方法：
createSelector
createSelector 接受一个或多个依赖选择器（Dependency Selectors）和一个计算函数，返回一个新的选择器函数。当依赖选择器的输入值发生变化时，Reselect 将重新计算结果：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
----- ------------- - ------- -- ------------
----- ------------------------ - ------- -- -----------------------
----- --------------------- - ---------------
--------------- --------------------------
------- ----------------- -- -
------ ------------------ -
---- -----------
------ ------
---- -----------------
------ ------------------- -- ----------------
---- --------------
------ ------------------- -- -----------------
--------
----- --- -------------- ------- - - ------------------
-
-
--createStructuredSelector
createStructuredSelector 可以将多个选择器函数状态，将它们的结果作为一个组合对象返回：
-- -------------------- ---- ------- ------ - ------------------------ - ---- ----------- ----- ------------- - ------- -- ------------ ----- ------------------------ - ------- -- ----------------------- ----- --------------- - -------------------------- ------ -------------- ----------------- ------------------------- ---
createSelectorCreator
createSelectorCreator 可以用于创建自定义选择器的创建函数。示例代码如下：
-- -------------------- ---- -------
------ - --------------------- - ---- -----------
----- --------------------- - ----------------------
--------------
-------
--
----- -------------- - ----------------------
--------------- --------------------------
------- ----------------- -- -
------ ------------------ -
---- -----------
------ ------
---- -----------------
------ ------------------- -- ----------------
---- --------------
------ ------------------- -- -----------------
--------
----- --- -------------- ------- - - ------------------
-
-
--总结
Mobx 和 Reselect 是两个能够解决 Redux 开发中常见问题的高级库。Mobx 提供了一种简单直接的响应式状态管理方式，而 Reselect 则提供了一种优雅的选择器设计方式。通过使用这两个库，开发人员可以更轻松地编写高效的 Redux 应用程序，并快速实现各种复杂的状态管理逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f89db95b1f8cacd717130