該教程通過(guò)以驚人的簡(jiǎn)潔代碼構(gòu)建功能性聊天應(yīng)用程序來(lái)展示React Hooks的力量。先前的文章引入了React鉤子，展示了它們使用函數(shù)創(chuàng)建組件的能力。本教程將其進(jìn)一步發(fā)展，說(shuō)明瞭如何簡(jiǎn)化開(kāi)發(fā)並減少樣板。

我們將利用幾個(gè)React鉤子，包括一些開(kāi)源選項(xiàng)，以簡(jiǎn)化流程並有效地構(gòu)建功能。這些預(yù)建的鉤子遵守已建立的標(biāo)準(zhǔn)，增強(qiáng)了代碼安全性和可維護(hù)性。

項(xiàng)目要求

我們的聊天應(yīng)用程序?qū)ǎ?/p>

• 從服務(wù)器檢索過(guò)去的消息。
• 小組聊天室功能。
• 用戶連接和斷開(kāi)連接的實(shí)時(shí)更新。
• 發(fā)送和接收消息。

假設(shè)：

• 該服務(wù)器被視為黑匣子，通過(guò)簡(jiǎn)單的插座進(jìn)行通信。
• 造型由單個(gè)CSS文件（可在鏈接的存儲(chǔ)庫(kù)中使用）來(lái)處理。

建立開(kāi)發(fā)環(huán)境

該項(xiàng)目需要node.js和npm（節(jié)點(diǎn)軟件包管理器）。如有必要，安裝它們。然後，使用Create React App創(chuàng)建React項(xiàng)目：

 NPX Create-React-App-client
CD插座 - 客戶
NPM開(kāi)始

導(dǎo)航到http://localhost:3000以查看默認(rèn)的歡迎頁(yè)面。我們將圍繞使用的鉤子構(gòu)建教程。

useState鉤子

useState掛鉤管理組件狀態(tài)。我們沒(méi)有在類(lèi)組件中使用this.state ，而是使用useState來(lái)存儲(chǔ)持久數(shù)據(jù)，例如用戶名。更新對(duì)useState變量會(huì)自動(dòng)重新渲染組件。

導(dǎo)入鉤子：

導(dǎo)入React，{usestate}來(lái)自“ React”；

一個(gè)簡(jiǎn)單的組件將根據(jù)id變量登錄，否則將顯示“ Hello”或登錄表單：

 // app.js
導(dǎo)入React，{usestate}來(lái)自“ React”；
導(dǎo)入'./index.css';

導(dǎo)出默認(rèn)值（）=> {
  const [id，setId] = usestate（“”）;
  const [nameInput，setNameInput] = usestate（“”）;
  const [房間，setroom] = usestate（“”）;

  const handlesubmit = e => {
    e.preventDefault（）;
    如果（！name -input）{
      返回警報(bào)（“名稱(chēng)不能為空”）；
    }
    setID（nameInput）; //更正：使用nameInput代替名稱(chēng)
    socket.emit（“ join”，nameInput，房間）; //更正：使用nameInput代替名稱(chēng)
  };

  // ...（該組件的其餘部分）
};

這證明了管理登錄狀態(tài)的useState 。

useSocket掛鉤

開(kāi)源使用useSocket Hook使用socket.io庫(kù)管理服務(wù)器連接。與標(biāo)準(zhǔn)socket.io客戶端的全局聲明相比，這為Websocket連接提供了更易於管理的方法。

安裝鉤子：

 npm添加用socket.io-client

基本用法：

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

導(dǎo)入和初始化：

從“ use-socket.io-client”中導(dǎo)入useSudeocket;
const [socket] = useSudeocket（'<your-socket-url> '）;
socket.connect（）;
console.log（套接字）;</your-socket-url>

檢查瀏覽器控制臺(tái)是否連接。

useImmer鉤

useImmer鉤簡(jiǎn)化了數(shù)組和對(duì)象的不變狀態(tài)管理。它可以防止原始狀態(tài)的直接突變。這對(duì)於管理在線用戶和消息列表至關(guān)重要。

安裝鉤子：

 npm添加用途

基本用法：

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

setData創(chuàng)建了一個(gè)草稿副本，以確保原始狀態(tài)保持完整。

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

useEffect鉤

渲染後，內(nèi)置的useEffect掛鉤執(zhí)行代碼。我們將使用它來(lái)處理套接字偵聽(tīng)器並避免顯示冗餘消息。

進(jìn)口：

導(dǎo)入React，{usestate，usefeft}來(lái)自'react';

Messages組件呈現(xiàn)消息和更新：

 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]）;
  }））;
  // ...其他插座聽(tīng)眾
}，[]）;

“加入”消息會(huì)觸發(fā)進(jìn)一步的聽(tīng)眾。

最終觸摸和完整的代碼

最終應(yīng)用需要：

• Online組件以顯示在線用戶。
• 用於在線用戶的使用者useImmer和套接字偵聽(tīng)器。
• 消息提交處理程序。

完整的App.js太廣泛了，無(wú)法在此處包含，但是完整的代碼可在GitHub上獲得（原始文章中提供的鏈接）。

該教程展示了用最小代碼構(gòu)建複雜應(yīng)用的React鉤子的效率。該示例顯示了功能性聊天應(yīng)用程序，但是這些原理可以應(yīng)用於廣泛的項(xiàng)目。

以上是在100行代碼中使用React Hook構(gòu)建聊天應(yīng)用程序的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！