React 是一款前端框架，它的主要特点是组件化和虚拟 DOM。在 React 中，组件通信是一个非常重要的问题。通常来说，组件之间的通信可以通过两种方式来实现：一种是传递方法，另一种是传递状态。
传递方法
组件通信最常用的方式之一就是传递方法。这种方式的基本思路是：在一个父组件中定义一个方法，然后将这个方法通过 props 传递给子组件。子组件可以在需要的时候调用这个方法来实现与父组件的通信。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- -------- -
----- ------- --------- - ------------
----- -------------- - -- -- -
-------------- - ---
--
----- -------------- - -- -- -
-------------- - ---
--
------ -
-----
------ --------------------------- --------------------------- --
------ ----- --------------
------
--
-
-------- ------------ -
----- - ----------- ---------- - - ------
------ -
-----
------- --------------------------------
------- --------------------------------
------
--
-
------ ------- -------在这个例子中，我们定义了一个 Parent 组件和一个 Child 组件。Parent 组件中有一个状态 count，以及两个方法 handleIncrease 和 handleDecrease。这两个方法被传递到 Child 组件中，通过按钮的点击事件来触发。
这种方式的优点是灵活性比较高，可以在子组件中自由地调用父组件中的方法。同时，由于 React 中的数据流是单向的，这种方式不会导致组件之间的状态耦合。
传递状态
除了传递方法之外，还有一种常见的组件通信方式是传递状态。这种方式的基本思路是：在一个父组件中定义一个状态，然后将这个状态通过 props 传递给子组件。子组件可以通过修改这个状态来实现与父组件的通信。
下面是一个示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- -------- -
----- ------- --------- - ------------
----- -------------- - -- -- -
-------------- - ---
--
------ -
-----
------ ------------- --------------------------- --
------ ----- --------------
------
--
-
-------- ------------ -
----- - ------ ---------- - - ------
------ -
-----
------ ----- --------------
------- --------------------------------
------
--
-
------ ------- -------在这个例子中，我们定义了一个 Parent 组件和一个 Child 组件。Parent 组件中有一个状态 count，并将这个状态传递到了 Child 组件中。当 Child 组件中的按钮被点击时，它会调用传递过来的 onIncrease 方法，这个方法会修改 Parent 组件中的 count 状态。
这种方式的优点是比较直观，能够同步实现组件之间的状态共享。同时，由于状态的修改是通过 props 进行的，组件之间的数据流仍然是单向的，不会导致状态耦合的问题。
总结
在 React 中，组件通信是一个非常重要的问题。通常来说，组件之间的通信可以通过传递方法或传递状态来实现。传递方法的优点是灵活性比较高，可以在子组件中自由地调用父组件中的方法，但也会产生耦合的问题。传递状态的优点是比较直观，能够同步实现组件之间的状态共享，但也会产生一定的重复和冗余。具体采用哪种方式，还要根据具体的业务需要和实际情况进行权衡和选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482c18648841e989421d1df