在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中文網其他相關文章！