在前端开发中，React是一个非常流行的框架。如果你刚刚开始使用React，你可能会遇到一些难题。比如需要在组件之间共享数据或调用函数，如果使用props或redux的话，代码会变得冗长或繁琐。这时候，React Tunnel 16就是一个非常好的解决方案。
React Tunnel 16是一个可以实现React组件之间通信的npm包。它可以创建一个全局通信频道，让多个组件之间可以互相发送消息、共享状态，而不必通过props传递数据或使用redux。在这篇文章中，我们将介绍如何使用npm包react-tunnel-16来实现组件之间的通信。
安装
安装react-tunnel-16包很简单。只需在终端中输入以下命令：
npm install react-tunnel-16
它将自动下载并安装包，并在您的项目中创建一个新的依赖项。
Usage
首先，在你的React应用程序中引入react-tunnel-16：
import Tunnel from 'react-tunnel-16';
现在你可以使用Tunnel组件来创建一个全局通信频道。在根组件中，我们可以将Tunnel组件包裹在所有其他组件的外面：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------
------ ---------- ---- ---------------
------ ---------- ---- ---------------
-------- ----- -
------ -
--------
----------- --
----------- --
---------
--
-
------ ------- ----这样，我们就创建了一个全局通信频道，所有其他组件都可以通过该组件来发送和接收消息。
Sending and Receiving messages
现在我们可以在任何组件中使用send函数来向其他组件发送消息。假设我们有两个组件：ComponentA和ComponentB，它们都被包裹在Tunnel组件中。我们可以在ComponentA组件中使用send函数来向ComponentB组件发送消息：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ------------------
-------- ------------ -
----- ----------- - -- -- -
--------------- ------ ---- --------- -----
--
------ -
------- -------------------------- ----------------
--
-
------ ------- -----------在上面的代码中，我们使用了send函数来发送名称为“message”的消息，并带有字符串“Hello from Component A！”作为数据。
接下来，在ComponentB组件中，我们可以使用useTunnel钩子来接收从ComponentA组件发送的“message”消息：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ------------------
-------- ------------ -
----- --------- ----------- - -------------
-------------------- ------ -- -
-----------------
---
------ -
------------- -------- ---------------
--
-
------ ------- -----------在上面的代码中，我们使用useTunnel钩子来订阅名称为“message”的消息，并在收到消息时将其存储在state中。我们可以将state（即消息）用于组件中所需的任何目的。
Conclusion
使用React Tunnel 16可以方便地在React组件之间共享状态和消息，而不必使用props或redux。它可以轻松地处理有关组件之间通信的所有细节，让你的代码更具可读性和可维护性。虽然React Tunnel 16并不是适用于所有场景，但在某些情况下，它可以是一个非常有用的工具。
示例代码
这里有一个完整的演示代码，你可以在你的本地环境中运行它，通过它来更好的学习和理解使用React Tunnel 16：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- - ---------- ---- - ---- ------------------
-------- ----- -
------ -
--------
----------- --
----------- --
---------
--
-
-------- ------------ -
----- ----------- - -- -- -
--------------- ------ ---- --------- -----
--
------ -
------- -------------------------- ----------------
--
-
-------- ------------ -
----- --------- ----------- - -------------
-------------------- ------ -- -
-----------------
---
------ -
------------- -------- ---------------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005692a81e8991b448e4b7a