React 是一款流行的前端框架，它的组件化思想和虚拟 DOM 技术使得开发人员可以更加高效地构建用户界面。然而，React 中的状态管理一直是开发人员面临的挑战之一。本文将总结 React 中的状态管理方法，包括组件状态、Redux 和 MobX。
组件状态
React 中的组件状态是组件内部的数据。组件状态只能在组件内部使用，不能在组件之间共享。组件状态通常用于保存用户输入、组件内部的计数器和其他临时数据。
下面是一个计数器组件的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
--------- -----------
------- --------------------------- ------------
------
--
-在上面的示例中，我们使用 useState 钩子来定义了一个名为 count 的状态变量，并将其初始值设置为 0。在 handleClick 函数中，我们使用 setCount 函数来更新 count 的值。
Redux
Redux 是一个流行的状态管理库，它提供了一个全局的状态存储器，可以在整个应用程序中共享数据。Redux 的核心概念是 store、action 和 reducer。
Store
Store 是 Redux 应用程序中的单一状态存储器。它保存了整个应用程序的状态，并提供了一些方法来访问和更新状态。使用 Redux，我们可以在整个应用程序中共享状态，这使得数据流更加清晰明了。
下面是一个简单的 Redux Store 示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在上面的示例中，我们使用 createStore 函数创建了一个名为 store 的 Redux Store。我们还定义了一个 reducer 函数，它接收当前状态和一个 action，然后返回一个新状态。在这个例子中，我们的状态只包含一个计数器，我们可以通过 INCREMENT 和 DECREMENT action 来更新它。
Action
Action 是一个包含 type 属性的简单对象。它描述了我们希望对状态进行的更改。在 Redux 中，我们不能直接修改状态，而是通过派发 action 来触发状态更改。
下面是一个简单的 action 示例：
const incrementAction = { type: "INCREMENT" };在上面的示例中，我们定义了一个名为 incrementAction 的 action，它的 type 属性为 INCREMENT。
Reducer
Reducer 是一个纯函数，它接收当前状态和一个 action，并返回一个新状态。Reducer 用于更新 Redux Store 中的状态。
下面是一个简单的 reducer 示例：
-- -------------------- ---- -------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-在上面的示例中，我们定义了一个名为 reducer 的函数。它接收当前状态和一个 action，并根据 action 的 type 属性返回一个新状态。
示例
下面是一个使用 Redux 的计数器组件示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
-------- --------- -
-------- ------------- -
---------------- ----- ----------- ---
-
------ -
-----
--------- ----------------------------
------- --------------------------- ------------
------
--
-在上面的示例中，我们使用 createStore 函数创建了一个名为 store 的 Redux Store。在 Counter 组件中，我们使用 store.getState() 方法来获取当前状态的值，并将其渲染到页面上。在 handleClick 函数中，我们使用 store.dispatch() 方法来派发一个名为 INCREMENT 的 action。
MobX
MobX 是一个简单、可扩展和高性能的状态管理库。它类似于 Redux，但提供了更少的样板代码。
Observable
Observable 是 MobX 中的核心概念。它是一种数据结构，可以在其上添加观察者。当 Observable 发生更改时，所有观察者都将被通知。
下面是一个简单的 Observable 示例：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ------- - ------------ ------ -- --- -------- ------------- - ---------------- -
在上面的示例中，我们使用 observable 函数创建了一个名为 counter 的 Observable。我们还定义了一个 handleClick 函数，它在每次调用时将 counter.count 的值增加 1。
示例
下面是一个使用 MobX 的计数器组件示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------
------ - -------- - ---- ------------------
----- ------- - ------------
------ --
---
-------- --------- -
-------- ------------- -
----------------
-
------ -
-----
--------- -------------------
------- --------------------------- ------------
------
--
-
------ ------- ------------------在上面的示例中，我们使用 observable 函数创建了一个名为 counter 的 Observable。在 Counter 组件中，我们渲染了 counter.count 的值，并在 handleClick 函数中更新了它。我们还使用 observer 高阶组件将 Counter 组件转换为一个可观察组件，这意味着它将自动重新渲染每当 counter.count 发生更改时。
结论
React 中的状态管理是前端开发中的重要问题。在本文中，我们总结了 React 中的状态管理方法，包括组件状态、Redux 和 MobX。无论你选择哪种方法，都应该考虑你的应用程序的规模和复杂程度。希望本文能够帮助你更好地管理你的 React 应用程序的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6613f535d10417a22245fead