React是目前应用最广泛的前端框架之一，它为开发者提供了一套简单易用的API，使得界面构建变得异常简单和轻松。同时，Next.js作为一种基于React的服务器端渲染框架，也随着React的广泛应用而得到了较大的关注。
在React或Next.js的开发项目中，状态管理是一个非常重要的技能。状态管理目的是将应用程序状态从组件之间解耦合，并确保代码的一致性、质量和可维护性。但是，对于初学者而言，如何管理React或Next.js的状态却是一个非常困难的问题。此文将介绍一些最流行的状态管理库，并提供具体的代码示例。无论是经验丰富的开发人员还是初学者，这些库都是值得掌握的。
1.传统管理方法
在React或Next.js的应用程序中，传统管理状态的方法是通过上下文或redux来实现。上下文API是React v16.3的一个新特性，它是一个跨级别传递数据的机制。Redux是一个非常流行的第三方状态管理库，它将应用程序的所有状态存储在单个中央存储库中，并以纯函数的方式更新这些状态。
以下是一个使用React上下文API管理状态的示例代码：
------ ------ - -------------- ----------- -------- - ---- --------
----- ------------ - ----------------
-------- ----- -
----- ------- --------- - -----------------
------ -
---------------------- --------------
------- ----------- -- -------------- --- ------ - ------- - ---------
------ -----
---------
-------- --
------------------------
--
-
-------- --------- -
----- ----- - -------------------------
------ -
-----
------------- ------ --------------
------
--
-在这个代码中，我们使用createContext函数创建了一个上下文API，该上下文API将主题作为值提供给ThemeContext.Provider组件。然后，在子组件Toolbar中使用useContext钩子来访问主题。
以下是一个使用redux管理状态的示例代码：
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
----- ------- - ------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ------------ --
--------
------ ------
-
--
----- ----- - -------------------- - ------ ------ ---
-------- ----- -
------ -
--------- --------------
------- ----------- -- ---------------- ----- ------------ ------ ------- ----
------ -----
---------
-------- --
-----------
--
-
-------- --------- -
----- - ----- - - ----------------- -- -------
------ -
-----
------------- ------ --------------
------
--
-在这个代码中，我们使用createStore函数创建了一个Redux存储库，将主题属性初始化为dark。然后，在App组件中，在Provider组件中传入存储库，并在子组件Toolbar中使用useSelector钩子来访问主题属性。
2.使用React Hooks
自React 16.8发布后，hooks成为了React的一部分。Hooks是一个非常强大的机制，允许开发人员在无需编写类组件的情况下共享状态和逻辑。由于hooks的出现，传统管理方法变得过时了。
以下是一个使用useStatehooks管理状态的示例代码：
------ ------ - -------- - ---- --------
-------- ----- -
----- ------- --------- - -----------------
------ -
-----
------- ----------- -- -------------- --- ------ - ------- - ---------
------ -----
---------
-------- ------------- --
------
--
-
-------- --------- ----- -- -
------ -
-----
------------- ------ --------------
------
--
-在这个代码中，我们使用useState hooks来将主题属性存储在组件中。我们在App组件中设置一个事件处理程序，该处理程序根据当前主题值来切换主题属性。我们向子组件Toolbar中传递主题属性，以便在该组件中显示。
3.使用第三方库
有许多第三方库可用于管理复杂的React或Next.js应用程序状态。 Redux，MobX和React Context API均为此类库提供了标准解决方案。以下是介绍其中两个库的简短示例：
a.Redux
Redux是一个简单易用的状态管理库，它基于Redux store将状态集中存储在单个地方，并以纯粹的方式处理它们。 Redux store中的状态可以通过Redux store.dispatch函数进行操作，该函数接收一个指定操作类型的action对象，并相应地更新状态。
以下是一个使用Redux库管理状态的示例代码：
-- --------
------ - ----------- - ---- --------
----- ------- - ------- ------- -- -
------ ------------- -
---- -----------
------ - --------- ------ ---------------- --------------- --
---- --------------
------ -
---------
------ ----------------------- -- ------- --- -------------------
--
--------
------ ------
-
--
----- ----- - -------------------- - ------ -- ---
------ ------- ------在这个例子中，我们使用Redux store存储库在一个地方存储了所有不同类型的状态，此处之存储了todos。我们定义了一个reducer函数，该函数负责根据它们接收到的action类型更新存储库中的状态。例如，当我们调用store.dispatch({ type: 'ADD_TODO', payload: { id: 1, text: 'Learn React' } })时，将执行ADD_TODO类型的操作，并将控制对象添加到store存储库中。
我们可以轻松地从其他组件中访问和操作Redux store存储库中的状态。使用useSelector钩子可以轻松地访问状态值，使用useDispatch钩子可以轻松地调用一个状态更新方法。
以下是一个使用Redux库管理状态的组件：
-- -----------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- ------------
-------- ---------- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
----- ------------- - ---- -- -
---------------------------
--
------ -
----
--------------- -- -
--- --------------
------------- --
------- ----------- -- ------------------------------------
-----
---
-----
--
-
------ ------- ---------在这个代码中，我们使用useSelector钩子从Redux Store存储库中选择todos数组，并使用useDispatch钩子获取一个状态更新的方法。然后，我们在组件TodoList中定义一个onDeleteClick事件处理程序，并调用我们的deleteTodo方法。在这里，我们通过调用我们的action对象来通知Redux我们要执行“删除控件”操作。
b.MobX
MobX是另一种非常流行的第三方状态管理库，它可帮助我们优雅地处理应用程序状态。它通过响应式编程的方式，只要状态发生变化就可以自动地重新计算组件中的值。相比于Redux，MobX更加强调直观且可读性强的编写JS代码，使得其更容易上手。
以下是一个使用MobX库管理状态的示例代码：
-- --------
------ - --------------- ----------- ------ - ---- -------
----- --------- -
----- - ---
------- - ---- -- -
----------------------
--
---------- - ---- -- -
----- ----- - ---------------------- -- ---- --- ---------
------------------------ ---
--
------------- -
-------------------- -
------ -----------
-------- -------
----------- -------
---
-
-
----- ----- - --- ------------
------ ------- ------
-- -----------
------ ----- ---- --------
------ - -------- - ---- ------------------
------ ----- ---- ----------
----- -------- - ----------- -- -
----- - ----- - - ------
----- ------------- - ---- -- -
-----------------------
--
------ -
----
--------------- -- -
--- --------------
------------- --
------- ----------- -- ------------------------------------
-----
---
-----
--
---
------ ------- ---------在这个代码中，我们定义了一个存储库类TodoStore，该类包含一些methods来操作todos数组，用以添加或删除组件。MobX通过makeObservable函数对这个存储库进行观察，如果其中的todos发生变化，组件也会自动地重新计算其值。
我们使用observer函数包裹TodoList组件，以便我们的组件可以观察到todos数组。在组件TodoList中，我们使用store对象来对todos进行增删，使用observer函数确保组件重新渲染，从而正确更新UI。
结论
本文介绍了传统管理方法、使用React Hooks和第三方库的状态管理方式。每种状态管理方式各有优缺点。需要根据具体的应用场景选择适合的状态管理方法。最后，希望本文的介绍能够帮助开发者更好地理解React或Next.js应用程序中的状态管理，并为他们的下一个项目选择最适合的状态管理库提供指南。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672317982e7021665e0e37d1