React Hooks 是 React 16.8 发布的新特性，用于在函数组件中添加状态和其他 React 功能。在这篇文章中，我们将使用 React Hooks 来开发一个简单的聊天室 2.0 版本。
前置知识
在继续之前，你需要熟悉以下技术：
- React
- JavaScript ES6
- WebSocket
如果你不熟悉其中任何一项，请先学习它们再来阅读这篇文章。
技术栈
我们将使用以下技术栈来构建聊天室 2.0 版本：
- React
- React Hooks (useState, useEffect)
- WebSocket
建立基本架构
首先，让我们建立聊天室的基本架构。在你的项目中创建一个名为 ChatRoom.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
----- -------- - -- -- -
----- ---------- ------------ - -------------
----- --------- ----------- - -------------
------------ -- -
-- --------- ---------- ---- ---- ----
-- ----
----- ----------------- - ------- -- -
-------------------------------
--
----- ------------ - ------- -- -
-----------------------
-- ---- ------- -- ------ ----- ---------
---------------
--
------ -
-----
-------- ---------
-----
----------------------- ------ -- -
---- ---------------------------
---
------
----- ------------------------
------ ----------- --------------- ---------------------------- --
------- ---------------------------
-------
------
--
--
------ ------- ---------在这个代码中，我们定义了两个 state 变量 messages 和 message，分别用于存储已接收到的消息和当前正在输入的消息。我们还使用了 useEffect Hook 来建立 WebSocket 连接，并且定义了 handleInputChange 和 handleSubmit 函数来处理用户的输入。
建立 WebSocket 连接
现在，让我们在 useEffect 中建立 WebSocket 连接。添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
----- -------- - -- -- -
----- ---------- ------------ - -------------
----- --------- ----------- - -------------
------------ -- -
----- --------- - --- ---------------------------------
------------------- - ------- -- -
----- ------- - -----------
---------------------- -- ------------- ----------
--
------ -- -- -
------------------
--
-- ----
----- ----------------- - ------- -- -
-------------------------------
--
----- ------------ - ------- -- -
-----------------------
-- --------------- --- --- -------
----- --------- - --- ---------------------------------
---------------- - -- -- -
------------------------
------------------
--
---------------
--
------ -
-----
-------- ---------
-----
----------------------- ------ -- -
---- ---------------------------
---
------
----- ------------------------
------ ----------- --------------- ---------------------------- --
------- ---------------------------
-------
------
--
--
------ ------- ---------在这个代码中，我们使用 new WebSocket() 建立了一个 WebSocket 连接，并在 onmessage 回调函数中处理从服务器接收到的消息。在 handleSubmit 函数中，我们发送用户输入的消息给服务器，并关闭连接。
测试聊天室
现在，让我们测试一下聊天室。在项目中创建一个名为 server.js 的文件，并添加以下代码：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
w
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/48084) ，转载请注明来源
[https://www.javascriptcn.com/post/48084](https://www.javascriptcn.com/post/48084)