在100行代码中使用React Hook构建聊天应用程序

该教程通过以惊人的简洁代码构建功能性聊天应用程序来展示React Hooks的力量。先前的文章引入了React钩子，展示了它们使用函数创建组件的能力。本教程将其进一步发展，说明了如何简化开发并减少样板。

我们将利用几个React钩子，包括一些开源选项，以简化流程并有效地构建功能。这些预建的钩子遵守已建立的标准，增强了代码安全性和可维护性。

项目要求

我们的聊天应用程序将包括：

• 从服务器检索过去的消息。
• 小组聊天室功能。
• 用户连接和断开连接的实时更新。
• 发送和接收消息。

假设：

• 该服务器被视为黑匣子，通过简单的插座进行通信。
• 造型由单个CSS文件（可在链接的存储库中使用）来处理。

建立开发环境

该项目需要node.js和npm（节点软件包管理器）。如有必要，安装它们。然后，使用Create React App创建React项目：

 NPX Create-React-App-client
CD插座 - 客户
NPM开始

导航到http://localhost:3000以查看默认的欢迎页面。我们将围绕使用的钩子构建教程。

useState钩子

useState挂钩管理组件状态。我们没有在类组件中使用this.state ，而是使用useState来存储持久数据，例如用户名。更新对useState变量会自动重新渲染组件。

导入钩子：

导入React，{usestate}来自“ React”；

一个简单的组件将根据id变量登录，否则将显示“ Hello”或登录表单：

 // app.js
导入React，{usestate}来自“ React”；
导入'./index.css';

导出默认值（）=> {
  const [id，setId] = usestate（“”）;
  const [nameInput，setNameInput] = usestate（“”）;
  const [房间，setroom] = usestate（“”）;

  const handlesubmit = e => {
    e.preventDefault（）;
    如果（！name -input）{
      返回警报（“名称不能为空”）；
    }
    setID（nameInput）; //更正：使用nameInput代替名称
    socket.emit（“ join”，nameInput，房间）; //更正：使用nameInput代替名称
  };

  // ...（该组件的其余部分）
};

这证明了管理登录状态的useState 。

useSocket挂钩

开源使用useSocket Hook使用socket.io库管理服务器连接。与标准socket.io客户端的全局声明相比，这为Websocket连接提供了更易于管理的方法。

安装钩子：

 npm添加用socket.io-client

基本用法：

 const [socket] = usesocket（'socket-url'）;

导入和初始化：

从“ use-socket.io-client”中导入useSudeocket;
const [socket] = useSudeocket（'<your-socket-url> '）;
socket.connect（）;
console.log（套接字）;</your-socket-url>

检查浏览器控制台是否连接。

useImmer钩

useImmer钩简化了数组和对象的不变状态管理。它可以防止原始状态的直接突变。这对于管理在线用户和消息列表至关重要。

安装钩子：

 npm添加用途

基本用法：

 const [data，setData] = useimmer（DefaultValue）;

setData创建了一个草稿副本，以确保原始状态保持完整。

 setdata（draft => {
  draft.push（newitem）;
}）;

useEffect钩

渲染后，内置的useEffect挂钩执行代码。我们将使用它来处理套接字侦听器并避免显示冗余消息。

进口：

导入React，{usestate，usefeft}来自'react';

Messages组件呈现消息和更新：

 const messages = props => props.data.map（m =>（（
  m [0]！==''？<div> {M [0]}：{M [1]}</div> ：<div classname="innermsg"> {M [1]}</div>
）;

useEffect中的插座逻辑可防止重复的消息渲染：

 useeffect（（）=> {
  socket.on（'update'，messages => setMessages（draft => {
    draft.push（[''，messages]）;
  }））;
  // ...其他插座听众
}，[]）;

“加入”消息会触发进一步的听众。

最终触摸和完整的代码

最终应用需要：

• Online组件以显示在线用户。
• 用于在线用户的使用者useImmer和套接字侦听器。
• 消息提交处理程序。

完整的App.js太广泛了，无法在此处包含，但是完整的代码可在GitHub上获得（原始文章中提供的链接）。

该教程展示了用最小代码构建复杂应用的React钩子的效率。该示例显示了功能性聊天应用程序，但是这些原理可以应用于广泛的项目。

以上是在100行代码中使用React Hook构建聊天应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！