在 React 应用中，组件之间的通信是一个非常重要的话题。在一个复杂的应用程序中，组件可能会关联到彼此的状态或者方法，这时候就需要一种方法来使组件进行交互。本文将会介绍三种常见的 React 组件通信方式，并提供相应的代码示例。
Props 传递
Props 是一个组件用来接收其他组件传递的参数。这种方式是 React 中最基本和最常见的组件通信方式。
在以下示例中，我们定义了一个 App 组件和一个 Child 组件。我们使用了 props 将数据从 App 组件传递到 Child 组件。Child 组件接收到 props 参数后，可以使用这些数据来渲染 UI。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------ -
------ -
-----
----------------------
----------------------
------
--
-
-------- ----- -
------ -
-----
------ ------------ -------------- --
------
--
-
------ ------- ----Context API
在某些情况下，我们希望在整个 React 应用中实现全局状态。这时候，我们可以使用 Context API。通过创建一个 Context 对象，我们可以在 App 组件中设置全局状态，而后通过 Consumer 组件来访问该状态。
在以下示例中，我们定义了一个 App 组件和两个 Child 组件。我们使用了 Context API 将数据从 App 组件传递到 Child 组件。Child 组件接收到 Consumer 组件后，可以使用这些数据来渲染 UI。
-- -------------------- ---- -------
------ ------ - -------------- ---------- - ---- --------
----- --------- - ------------------
-------- ------- -
----- - ----- - - ----------------------
------ -----------------
-
-------- -------- -
----- - ------- - - ----------------------
------ -----------------
-
-------- ----- -
------ -
------------------- -------- ------ ------- -------- ------ ---
-----
------ --
------- --
------
---------------------
--
-
------ ------- ----Refs 传递
Refs 是 React 中一种用于访问组件或 DOM 元素的值的机制。这种方式允许我们在任何地方访问组件，因此允许我们在组件之间传递数据。
在以下示例中，我们定义了一个 App 组件和两个 Child 组件。我们使用了 Refs 将 Child2 组件中的方法传递到 Child 组件中，并使用该方法来更新 Child 组件的状态。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
-------- ------------ -
----- - ------------- - - ------
------ -
-----
----------------------
----------------------
------- -------------------------------------
------
--
-
----- ------ ------- --------------- -
------------------ -
-------------
---------- - - -------- ------ --
--------------- - ---------------------------
-
------------------- -
--------------- ------- ---
-
-------- -
------ -------------------------------------
-
-
-------- ----- -
----- ---------------- - ------------
------ -
-----
------
------------
--------------
----------------- -- -----------------------------------
--
--------
------------- -- -
------------------------ - -----------
------ -----
--
---------
------
--
-
------ ------- ----总结
在 React 应用中，组件之间的通信是一个非常重要的话题。三种最常见的组件通信方式是 Props 传递、Context API 和 Refs 传递。在实际开发中，我们可以根据具体情况来选择使用相应的方式来实现组件之间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4a751b5eee0b525c40993