在 React 中，组件是视图层的基本单元。它可以是容器组件，也可以是展示组件。容器组件处理业务逻辑，展示组件负责渲染 UI。这种分离的设计模式有助于提高代码的可读性和可维护性。本文将详细介绍 React 中容器组件和展示组件的设计模式，并提供示例代码供参考。
什么是容器组件？
容器组件是负责处理业务逻辑的组件。它们通常包含以下特点：
- 负责维护组件内部的状态，并将其传递给展示组件。
- 控制数据的获取和处理，通常通过使用 Redux 进行管理。
- 可以包含多个展示组件，将它们连接在一起，形成一个完整的页面。
- 包含其他的组件，比如 UI 组件、高阶组件等。
容器组件的设计目的是将各种业务逻辑与渲染 UI 分离开来，以保持代码清晰和易于扩展。下面是一个简单的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------------------ ------- --------- -
------------------ -
-------------
---------- - -
----- ---
--
-
------------------- -
--------------------- -- -
--------------- ---- ---
---
-
-------- -
----- - ---- - - -----------
------ -
-----
--- ------ -- ---------- ---
------
--
-
-
------ ------- -------------------在这个例子中，容器组件 ContainerComponent 负责获取数据，处理它们，并将状态传递给展示组件以渲染 UI。
什么是展示组件？
展示组件是负责渲染 UI 的组件。它们通常包含以下特点：
- 不负责维护组件的状态，只负责展示组件属性中的数据。
- 使用 props 接收需要展示的数据，并将其呈现为 UI。
- 可能包含其他的 UI 组件。
展示组件的设计目的是使 UI 的代码易于维护和扩展。下面是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------------- - -- ---- -- -- -
-----
--- ------ -- ---------- ---- ---- ---
------
--
------ ------- -----------------在这个例子中，展示组件 DisplayComponent 通过 props 接收数据，并将其展示为 UI。
容器组件和展示组件的使用方式
在前面的例子中，我们已经看到了容器组件和展示组件的基本用法。以下是它们的更详细用法：
容器组件的使用方式
- 容器组件通过维护状态进行业务逻辑的处理。
- 容器组件通常通过
props将数据传递给展示组件。 - 容器组件与 Redux 配合使用，以管理应用的状态。
- 容器组件可以包含多个展示组件，将它们连接在一起，形成一个完整的页面。
下面是一个使用容器组件的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ ---------------- ---- ---------------------
----- ------------------ ------- --------- -
-------- -
----- - ---- - - -----------
------ ----------------- ----------- ---
-
-
----- --------------- - ----- -- --
----- -----------
---
------ ------- ---------------------------------------------在这个例子中，容器组件 ContainerComponent 通过 Redux 获取数据，并将其传递给展示组件 DisplayComponent 进行渲染。
展示组件的使用方式
- 展示组件通过
props接收数据并呈现为 UI。 - 展示组件仅负责渲染 UI，不处理任何业务逻辑。
- 展示组件可能包含其他 UI 组件，以形成一个完整的页面。
下面是一个使用展示组件的例子：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------------- - -- ---- -- -- -
-----
-------------- -- -
---- --------------
------------------------
-------------------------
------
---
------
--
------ ------- -----------------在这个例子中，展示组件 DisplayComponent 接收 data 属性，并将其渲染为 UI 显示。
总结
容器组件和展示组件是 React 的常见设计模式。容器组件用于处理业务逻辑，展示组件用于渲染 UI。通过将这两种组件结合起来使用，可以提高代码的可读性和可维护性。
在使用容器组件和展示组件时，需要考虑它们之间的数据流动和如何将它们连接起来。建议采用 Redux 管理数据流，以便更好地处理数据。希望本文对您有所帮助，更多 React 技术内容敬请关注我们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7865e48841e989440850e