100行のコードでReactフックを使用してチャットアプリを構築する

このチュートリアルは、驚くほど簡潔なコードで機能的なチャットアプリケーションを構築することにより、Reactフックの力を示しています。以前の記事では、Reactフックが導入され、関数を使用してコンポーネントを作成する能力を紹介しています。このチュートリアルは、フックが開発を簡素化し、ボイラープレートを削減する方法を示して、さらにそれを取り上げます。

いくつかのオープンソースオプションを含むいくつかのReactフックを活用して、プロセスを合理化し、機能を効率的に構築します。これらの事前に構築されたフックは、確立された標準に準拠しており、コードセキュリティと保守性を高めます。

プロジェクトの要件

チャットアプリケーションには次のものが含まれます。

• サーバーからの過去のメッセージの取得。
• グループチャットルームの機能。
• ユーザー接続と切断のリアルタイム更新。
• メッセージの送信と受信。

仮定：

• サーバーはブラックボックスとして扱われ、単純なソケットを介して通信します。
• スタイリングは、単一のCSSファイル（リンクリポジトリで使用可能）で処理されます。

開発環境のセットアップ

このプロジェクトには、node.jsとnpm（ノードパッケージマネージャー）が必要です。必要に応じてそれらをインストールしてください。次に、Create Reactアプリを使用してReactプロジェクトを作成します。

 NPX CREATE-REACT-APPソケットクライアント
CDソケットクライアント
NPM開始

http://localhost:3000に移動して、デフォルトのウェルカムページを表示します。使用されるフックの周りにチュートリアルを構成します。

useStateフック

useStateフックはコンポーネント状態を管理します。クラスコンポーネントでthis.state使用する代わりに、 useStateを使用して、ユーザー名のように永続的なデータを保存します。 useState変数の更新は、コンポーネントを自動的に再レン​​ダリングします。

フックをインポートします：

 「React」からReact、{UseState}をインポートします。

単純なコンポーネントは、 id変数に基づいて、ログインした場合、ログインした場合、またはログインフォームを表示します。

 // app.js
「React」からReact、{UseState}をインポートします。
Import './index.css';

Export Default（）=> {
  const [id、setid] = uesestate（ ""）;
  const [nameinput、setnameInput] = uesestate（ ""）;
  const [room、setroom] = uesestate（ ""）;

  const handleSubmit = e => {
    E.PreventDefault（）;
    if（！nameInput）{
      return alert（ "name can couns ve vey"）;
    }
    setid（nameinput）; //修正：名前の代わりにnameinputを使用します
    socket.emit（ "join"、nameinput、room）; //修正：名前の代わりにnameinputを使用します
  };

  // ...（コンポーネントの残り）
};

これは、ログインステータスを管理するためのuseState示しています。

useSocketフック

Open-Source useSocket Hookは、socket.ioライブラリを使用してサーバー接続を管理します。これは、標準のsocket.ioクライアントのグローバル宣言と比較して、WebSocket接続に対するより管理しやすいアプローチを提供します。

フックをインストールします：

 npm use-socket.io-clientを追加します

基本的な使用法：

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

インポートと初期化：

 「use-socket.io-client」からuseSocketをインポートします。
const [socket] = useSocket（ '<your-socket-url> '）;
socket.connect（）;
console.log（socket）;</your-socket-url>

接続のブラウザコンソールを確認してください。

useImmerフック

useImmerフックは、アレイとオブジェクトの不変の状態管理を簡素化します。元の状態の直接的な突然変異を防ぎます。これは、オンラインユーザーとメッセージのリストを管理するために重要です。

フックをインストールします：

 npm use-immerを追加します

基本的な使用法：

 const [data、setData] = useimmer（defaultValue）;

setData 、安全な操作のためのドラフトコピーを作成し、元の状態がそのままであることを保証します。

 setdata（draft => {
  drawt.push（newItem）;
}）;

EffectフックuseEffect

組み込みのuseEffectフックは、レンダリング後にコードを実行します。ソケットリスナーを処理し、冗長なメッセージディスプレイを避けるために使用します。

輸入：

 Reactをインポート、{useState、useefcect} from 'React';

Messagesコンポーネントはメッセージと更新をレンダリングします。

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

useEffect内のソケットロジックは、繰り返しメッセージレンダリングを防ぎます。

 effect（（）=> {
  socket.on（ 'update'、message => setMessages（draft => {
    drawt.push（[''、message]）;
  }））;
  // ...他のソケットリスナー
}、[]）;

「参加」メッセージは、さらなるリスナーをトリガーします。

最終的なタッチと完全なコード

最終的なアプリには次のことが必要です。

• オンラインユーザーを表示するOnlineコンポーネント。
• オンラインユーザー向けのuseImmerフックとソケットリスナー。
• メッセージ送信ハンドラー。

完全なApp.jsここに含めるには広すぎますが、完全なコードはGithubで利用できます（元の記事で提供されているリンク）。

このチュートリアルは、最小限のコードで複雑なアプリケーションを構築するためのReactフックの効率を示しています。この例は、機能的なチャットアプリケーションを紹介しますが、原則は幅広いプロジェクトに適用できます。

以上が100行のコードでReactフックを使用してチャットアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。