在 React 中，组件通讯是非常常见的问题。比如父子组件之间的通讯、兄弟组件之间的通讯、跨级组件之间的通讯等。本文将介绍 React 中常见的组件通讯问题以及解决方案。
父子组件之间的通讯
在 React 中，父子组件之间的通讯是非常常见的问题。父组件可以通过 props 向下传递数据，子组件则可以通过 props 来接收数据。但是，如果父组件需要获取子组件的状态或者调用子组件的方法，就需要用到 refs。
refs
refs 是 React 提供的一个特殊属性，用于访问组件的实例。通过 refs，可以获取到组件的状态和方法。下面是一个示例：
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - ------------------
-
------------- -
----- ---------- - -------------------------
------------------------
----------------------------
-
-------- -
------ -
-----
------ ---------------- --
------- --------------------------------------------------------------
------
--
-
-
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
-------- -
-------------------------
-
-------- -
------ ------------------------------
-
-在上面的例子中，我们通过 refs 获取到了子组件的实例，并可以访问其状态和方法。需要注意的是，refs 只在组件挂载后才会被赋值，所以在组件的生命周期方法中使用 refs 时需要注意。
兄弟组件之间的通讯
在 React 中，兄弟组件之间的通讯通常需要借助父组件来实现。父组件作为中介，将数据传递给兄弟组件。
状态提升
状态提升是 React 中常用的一种解决方案。通过将需要共享的状态提升到它们的最近公共祖先组件中，可以实现兄弟组件之间的通讯。下面是一个示例：
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
------------- -
---------------
------ ---------------- - -
---
-
-------- -
------ -
-----
------- ------------------------ --
------- ------------------------ ----------------------------------------- --
------
--
-
-
-------- ------------- -
------ -------------------------
-
-------- ------------- -
------ ------- ----------------------------------------
-在上面的例子中，我们将需要共享的状态 count 提升到了父组件中，并通过 props 传递给了兄弟组件。当点击 Child2 组件中的按钮时，会调用父组件中的 handleClick 方法，从而改变 count 的值。
跨级组件之间的通讯
在 React 中，跨级组件之间的通讯也需要借助父组件来实现。但是，如果跨级组件之间的层级比较深，通过 props 一层层传递数据会非常麻烦。这时，可以使用 Context。
Context
Context 是 React 提供的一种跨组件传递数据的方式。通过 Context，可以在组件树中传递数据，而不需要一层层地通过 props 传递。下面是一个示例：
-- -------------------- ---- -------
----- ----------- - ----------------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----- -
----- -----
---- --
-
--
-
-------- -
------ -
--------------------- ------------------------
------ --
-----------------------
--
-
-
-------- ------- -
------ -
-----
----------- --
------
--
-
-------- ------------ -
------ -
----------------------
----- -- -
-----
-------------------------
------------------------
------
--
-----------------------
--
-在上面的例子中，我们通过 createContext 创建了一个 UserContext，并在父组件中通过 UserContext.Provider 来提供数据。在子组件中，我们通过 UserContext.Consumer 来消费数据。
需要注意的是，当 Provider 的 value 值发生变化时，所有 Consumer 组件都会重新渲染。所以，Context 适用于跨级组件之间的通讯，但不适用于高频率的更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d363c2a941bf7134666206
