Bina aplikasi sembang menggunakan cangkuk reaksi dalam 100 baris kod

Tutorial ini menunjukkan kuasa cangkuk bertindak balas dengan membina aplikasi sembang berfungsi dalam kod ringkas yang mengejutkan. Artikel terdahulu telah memperkenalkan cangkuk Reacts, mempamerkan keupayaan mereka untuk membuat komponen menggunakan fungsi. Tutorial ini mengambil lebih jauh, menggambarkan bagaimana cangkuk memudahkan pembangunan dan mengurangkan boilerplate.

Kami akan memanfaatkan beberapa cangkuk bertindak balas, termasuk beberapa pilihan sumber terbuka, untuk menyelaraskan proses dan membina ciri-ciri dengan cekap. Cangkuk pra-bina ini mematuhi piawaian yang ditetapkan, meningkatkan keselamatan kod dan penyelenggaraan.

Keperluan projek

Permohonan sembang kami akan merangkumi:

• Pengambilan mesej masa lalu dari pelayan.
• Fungsi bilik sembang kumpulan.
• Kemas kini masa nyata untuk sambungan pengguna dan pemotongan.
• Menghantar dan menerima mesej.

Andaian:

• Pelayan dianggap sebagai kotak hitam, berkomunikasi melalui soket mudah.
• Styling dikendalikan oleh fail CSS tunggal (tersedia dalam repositori yang dipautkan).

Menyiapkan persekitaran pembangunan

Projek ini memerlukan Node.js dan NPM (Pengurus Pakej Node). Pasangnya jika perlu. Kemudian, buat projek React menggunakan Create React App:

 NPX create-react-app socket-client
CD Socket-Client
NPM START

Navigasi ke http://localhost:3000 untuk melihat halaman selamat datang lalai. Kami akan menyusun tutorial di sekitar cangkuk yang digunakan.

cangkuk useState

Hook useState menguruskan keadaan komponen. Daripada menggunakan this.state Dalam komponen kelas, kami menggunakan useState untuk menyimpan data yang berterusan, seperti nama pengguna. Kemas kini untuk useState pembolehubah secara automatik membuat semula komponen.

Import cangkuk:

 Import React, {Usestate} dari 'React';

Komponen mudah akan memaparkan "hello" jika log masuk, atau borang log masuk sebaliknya, berdasarkan pembolehubah id :

 // app.js
Import React, {Usestate} dari 'React';
import './index.css';

Eksport lalai () => {
  const [id, setId] = useState ("");
  const [nameInput, setNameInput] = useState ("");
  const [bilik, setroom] = useState ("");

  const handlesubmit = e => {
    E.PreventDefault ();
    jika (! nameInput) {
      Kembali amaran ("Nama tidak boleh kosong");
    }
    setID (nameInput); // diperbetulkan: Gunakan nameInput dan bukannya nama
    socket.emit ("Sertai", nameInput, bilik); // diperbetulkan: Gunakan nameInput dan bukannya nama
  };

  // ... (selebihnya komponen)
};

Ini menunjukkan useState untuk menguruskan status log masuk.

useSocket Hook

Sumber Terbuka useSocket Hook menguruskan sambungan pelayan menggunakan perpustakaan Socket.io. Ini memberikan pendekatan yang lebih mudah diurus kepada sambungan WebSocket berbanding dengan pengisytiharan global klien Socket.io standard.

Pasang cangkuk:

 NPM Tambah Use-Socket.io-Client

Penggunaan Asas:

 const [socket] = menggunakan ('socket-url');

Import dan Inisialisasi:

 Penggunaan Import dari 'use-socket.io-client';
const [socket] = UseSocket ('<your-socket-url> ');
socket.Connect ();
console.log (soket);</your-socket-url>

Semak konsol penyemak imbas untuk sambungan.

useImmer Hook

Hook useImmer memudahkan pengurusan negeri yang tidak berubah untuk tatasusunan dan objek. Ia menghalang mutasi langsung keadaan asal. Ini penting untuk menguruskan senarai pengguna dan mesej dalam talian.

Pasang cangkuk:

 NPM Tambah Penggunaan-Immer

Penggunaan Asas:

 const [data, setData] = useImmer (defaultValue);

setData mencipta salinan draf untuk manipulasi selamat, memastikan keadaan asal tetap utuh.

 setData (draf => {
  draf.push (newItem);
});

Hook useEffect

Hook useEffect terbina dalam melaksanakan kod selepas rendering. Kami akan menggunakannya untuk mengendalikan pendengar soket dan mengelakkan paparan mesej yang berlebihan.

Import:

 import react, {usestate, useeffect} dari 'react';

Komponen Messages membuat mesej dan kemas kini:

 mesej const = props => props.data.map (m => (
  M [0]! == ''?<div> {m [0]}: {m [1]}</div> :<div classname="innermsg"> {m [1]}</div>
));

Logik soket dalam useEffect menghalang rendering mesej berulang:

 useeffect (() => {
  socket.on ('kemas kini', mesej => setMessages (draf => {
    draf.push (['', mesej]);
  }));
  // ... pendengar soket lain
}, []);

Mesej "Sertai" mencetuskan pendengar lebih lanjut.

Sentuhan terakhir dan kod lengkap

Aplikasi akhir memerlukan:

• Komponen Online untuk memaparkan pengguna dalam talian.
• Seorang pendengar Hook dan Socket useImmer untuk pengguna dalam talian.
• Pengendali penyerahan mesej.

App.js lengkap terlalu luas untuk dimasukkan ke sini, tetapi kod lengkap tersedia di GitHub (pautan yang disediakan dalam artikel asal).

Tutorial ini menunjukkan kecekapan cangkuk bertindak balas untuk membina aplikasi kompleks dengan kod minimum. Contohnya mempamerkan aplikasi sembang berfungsi, tetapi prinsip -prinsip boleh digunakan untuk pelbagai projek.

Atas ialah kandungan terperinci Bina aplikasi sembang menggunakan cangkuk reaksi dalam 100 baris kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!