React 是一个非常流行的前端框架，它的组件化思想让我们能够更好地管理我们的应用程序。但是，当应用程序变得越来越复杂时，组件之间的状态共享会变得越来越困难。在本文中，我们将介绍 React 中如何优雅地处理组件之间的共用状态。
什么是组件之间的共用状态？
在 React 中，每个组件都有自己的状态（state）和属性（props）。当组件需要与其他组件共享状态时，我们需要将这些状态提升到它们的共同父组件中，这样它们就可以共享状态了。
例如，假设我们有一个应用程序，其中有一个名为 Counter 的组件，它显示一个计数器，并且有两个按钮：一个用于增加计数器的值，另一个用于减少计数器的值。
现在，我们想要在另一个组件 Total 中显示所有 Counter 组件的值的总和。为了实现这个功能，我们需要将 Counter 组件的状态提升到它们的共同父组件中，并将这些状态作为 props 传递给 Total 组件。
如何优雅地处理组件之间的共用状态？
在 React 中，我们可以通过以下三种方法来优雅地处理组件之间的共用状态：
1. 将状态提升到共同的父组件中
如上所述，将状态提升到共同的父组件中是一种很好的处理组件之间共用状态的方式。这样，我们就可以在父组件中管理所有子组件的状态，并将这些状态作为 props 传递给它们。
例如，我们可以创建一个名为 App 的父组件，将所有 Counter 组件的状态提升到 App 组件中，并将这些状态作为 props 传递给 Total 组件。代码示例：
-- -------------------- ---- ------- ----- --- ------- --------------- - ------------------ - ------------- ---------- - - --------- --- -- --- -- - --------------- - ------- -- - ----- -------- - ------------------------- ------------------ --------------- -------- --- -- --------------- - ------- -- - ----- -------- - ------------------------- ------------------ --------------- -------- --- -- -------- - ----- ----- - ------------------------------ -- -- - - --- ------ - ----- -------------------------------- ------ -- - -------- ----------- ------------- --------------- -- ---------------------------- --------------- -- ---------------------------- -- --- ------ ------------- -- ------ -- - -展开代码
2. 使用 React Context
React Context 是一种用于在组件之间共享状态的高级功能。它允许我们在组件树中传递数据，而不必显式地将数据传递给每个组件。
例如，我们可以创建一个名为 CounterContext 的 Context，将每个 Counter 组件的状态存储在其中，并将这个 Context 传递给 Total 组件。代码示例：
-- -------------------- ---- ------- ----- -------------- - ---------------------- ----- --- ------- --------------- - ------------------ - ------------- ---------- - - --------- --- -- --- -- - --------------- - ------- -- - ----- -------- - ------------------------- ------------------ --------------- -------- --- -- --------------- - ------- -- - ----- -------- - ------------------------- ------------------ --------------- -------- --- -- -------- - ------ - ------------------------ ---------------------------- -------------------------------- ------ -- - -------- ----------- ------------- --------------- -- ---------------------------- --------------- -- ---------------------------- -- --- ------ -- -------------------------- -- - - ----- ------- ------- --------------- - ------ ----------- - --------------- -------- - ----- ----- - ------------------------------- ------ - ----- ------- ------------------------------------------- -------------------- ------- ------------------------------------------- ------ -- - - ----- ----- ------- --------------- - ------ ----------- - --------------- -------- - ----- ----- - ----------------------- -- -- - - --- ------ ----------- -------------- - -展开代码
3. 使用 Redux
Redux 是一个流行的状态管理库，它可以帮助我们更好地管理应用程序的状态。它使用单一的存储库来存储应用程序的状态，并使用纯函数来更新状态。
在 Redux 中，我们可以将所有组件共享的状态存储在一个单一的存储库中，并使用 connect 函数将这些状态映射到组件的 props 中。
例如，我们可以创建一个名为 counter 的 Redux 存储库，将每个 Counter 组件的状态存储在其中，并将这个存储库映射到 Total 组件的 props 中。代码示例：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - -------- -------- - ---- -------------- ----- --------- - ------------ ----- --------- - ------------ ----- -------------- - ------ - --- -- --- ------- -- - ------ ------------- - ---- ---------- ------ ----------------- ------ -- ----- --- -------------------- - ----- - - - ----- -- ---- ---------- ------ ----------------- ------ -- ----- --- -------------------- - ----- - - - ----- -- -------- ------ ------ - -- ----- ----- - ---------------------------- ----- --------------- - ------- -- -- ----- ---------- -------- - ----- -- --- ----- --------------- - ------- -- -- ----- ---------- -------- - ----- -- --- ----- ------- - -- ------ ------------ ----------- -- -- - ----- ------- -------------------------------- -------------------- ------- -------------------------------- ------ -- ----- ----- - -- ----- -- -- ----------- -------------- ----- --------------- - ------- -- -- --------- ------ ------ ---------------- -- -- - - --- --- ----- ------------------ - ---------- --------- -- -- ------------ -- -- ------------------------------------------ ------------ -- -- ------------------------------------------ --- ----- ---------------- - -------- ----- ------------------ ----------- ----- -------------- - -------------------------------- ----- --- - -- -- - --------- -------------- ----- ---- -- -------------- -- - ----------------- ----------- ------------- -- --- --------------- -- ------ ----------- --展开代码
结论
在 React 中，处理组件之间的共用状态是一个很常见的问题。我们可以将状态提升到共同的父组件中，使用 React Context 或使用 Redux 来优雅地处理这个问题。选择哪种方式取决于您的应用程序的规模和需求。无论您选择哪种方式，都应该遵循最佳实践，以确保您的代码易于维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6765245676af2b9a20e8f2b0
