React 是由 Facebook 开发的 JavaScript 库，旨在使构建动态用户界面变得更加容易。React 提供了一种优雅的方法来组织代码，其中最重要的是将 UI 拆分为可重用的单元组件。在这篇文章中，我们将讨论如何将 React 组件分为智能组件和呈现组件，以提高代码的可重用性和可维护性。
什么是智能组件和呈现组件
React 中存在两种类型的组件：智能组件和呈现组件。智能组件通常被称为容器组件或高阶组件，它们的职责包括管理状态、进行逻辑处理，以及向呈现组件传递数据和方法。而呈现组件通常被称为展示组件或低阶组件，它们的职责仅仅是渲染 UI，并从智能组件中接收数据和方法。
下面是一个简单的例子，展示了如何将组件拆分为智能组件和呈现组件。
-- ----
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
----------- - -- -- -
----------------------- -- -- ------ --------------- - - ----
--
-------- -
------ -
--------------- ------------------------ ------------------------------ --
--
-
-
-- ----
----- -------------- - -- ------ ----------- -- -- -
-----
--------- -----------
------- ----------------------------------------
------
--在上面的例子中，我们将 Counter 组件分为了 Counter 智能组件和 CounterDisplay 呈现组件。Counter 组件管理状态和逻辑处理（例如 handleClick 方法），并将数据和方法作为 props 传递给 CounterDisplay 组件，CounterDisplay 组件的唯一责任就是渲染 UI。
为什么要分离智能组件和呈现组件
将组件拆分为智能组件和呈现组件的主要目的是提高代码的可重用性和可维护性。通过将逻辑处理和 UI 渲染分离到不同的组件中，我们可以更容易地复用组件代码，并且可以更轻松地进行更改和维护。
此外，将组件拆分为智能组件和呈现组件可以使代码更易于测试。智能组件通常包括与业务相关的代码，这意味着可以更轻松地编写单元测试来确保这些代码的正确性。
如何编写智能组件和呈现组件
编写智能组件和呈现组件的一般准则是将逻辑处理和 UI 渲染分离到不同的组件中。智能组件通常包含以下内容：
- 管理状态和状态更新逻辑
- 处理和转换数据的逻辑
- 与相关数据和事件处理程序交互的逻辑
呈现组件通常包含以下内容：
- 渲染静态 UI
- 简单交互行为（例如点击操作）
下面是一些编写智能组件和呈现组件的技巧：
智能组件
- 将状态抽象为单独的模块（例如使用 Redux）
- 分离逻辑处理和数据依赖项
- 使用 Higher-Order Components 或 Render Props
- 明确定义输入和输出数据（即定义 props）
- 提供有意义的默认值
呈现组件
- 分离样式和展示逻辑
- 只接收来自高阶组件或上级组件传递下来的 props
- 使用 PropTypes 进行类型检查
- 提供默认 prop 值
示例代码
下面是一个更复杂的例子，我们将 React 组件分离为智能组件和呈现组件，以展示如何使用智能组件和呈现组件提高代码的可重用性和可维护性。
-- ----
----- ----------------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
------------------- -
----------------------------------
--------- -- -----------
----------- -- --------------- ----- ----
-
------------ - -- -- -
----- - ----- - - -----------
----- -------------- - ----------------- -- ------- --- ----
--------------- ------ -------------- ---
--
-------- -
----- - ----- - - -----------
------ --------- ------------- -------------------------------- ---
-
-
-- ----
----- -------- - -- ------ ------------ -- -- -
-----
----
--------------- -- -
--- --------------
-----------
------- ----------- -- --------------------------------------
-----
---
-----
------
--在上面的例子中，我们将一个包含用户列表的 React 组件分成了 UserListContainer 智能组件和 UserList 呈现组件。UserListContainer 组件管理状态和逻辑处理（例如 componentDidMount 和 handleDelete 方法），并将数据和方法作为 props 传递给 UserList 组件，UserList 组件的唯一责任就是渲染用户列表 UI。
结论
将 React 组件分为智能组件和呈现组件是一种优秀的技术，旨在提高代码的可重用性、可维护性和可测试性。使用智能组件和呈现组件可以使代码更清晰、更易于管理，而且在实际应用中非常实用。尽管学习并掌握这种技术需要时间和实践，但它将值得投入。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6700d575c842884a45a8846a