在 React 中，组件的重复使用是一个非常重要的概念，它可以节省代码，并提高代码的可维护性。但是有时候，我们需要在多个组件之间共享一些状态或逻辑，这个时候，我们需要使用一些技术来解决这个问题。在本文中，我们将介绍两种常见的方法：高阶组件（Higher-Order Components，HOC）和渲染属性（Render Props）。
高阶组件
高阶组件是一个函数，它接受一个组件作为参数，并返回一个新的组件。通过这种方式，我们可以将一些共享的逻辑提取出来，并将其封装在高阶组件中。例如，我们可以创建一个用于验证用户是否登录的高阶组件：
-------- ------------------- -
------ ----- ------- --------------- -
------------------ -
-------------
---------- - -
---------------- -----
--
-
------------------- -
-- ------
----- --------------- - ------------
--------------- --------------- ---
-
-------- -
-- ----------------------------- -
-- ---------------
------ ------ ---
-
-- ----------------
------ ---------- --------------- ---
-
--
-
-- ---------------------
----- --------- - -----------------------------在上面的代码示例中，我们定义了一个 withAuth 高阶组件，它接受一个组件作为参数，并返回一个新的组件。在新的组件中，我们获取了当前用户的登录状态，并根据登录状态渲染不同的组件。通过这种方式，我们可以将登录验证逻辑封装在高阶组件中，并将其应用于多个组件。
渲染属性
渲染属性是一种模式，它允许组件将其内部的状态和行为作为属性传递给其他组件。例如，我们可以创建一个用于显示当前时间的组件：
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
----- --- ------
--
-
------------------- -
-- -------
---------- - -------------- -- ------------ ------
-
---------------------- -
--------------------------
-
------ -
---------------
----- --- ------
---
-
-------- -
------ -----------------------------------
-
-
-- -----------------
----- --- - -- -- -
-----
------
------------ -- -
------------------------------------
--
--
------
--在上面的代码示例中，我们定义了一个 Clock 组件，它通过 render 属性将当前时间传递给另一个组件。在 Clock 组件中，我们使用 setInterval 方法来每秒钟更新时间，并将更新后的时间作为 render 方法的参数传递给外部组件。通过这种方式，我们可以将 Clock 组件的内部状态和行为作为属性传递给其他组件，从而实现代码复用。
结论
通过使用高阶组件和渲染属性，我们可以将一些常用的逻辑封装在组件中，并在多个组件之间共享。这样，我们可以有效地减少代码的冗余度，并提高代码的可维护性。在实际项目中，我们应该根据具体场景来选择适合的组件复用方法，在解决问题的同时，尽可能地提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672071c32e7021665e023f49