Aplikasi Web Fullstack Next.js 15 · Pelajaran

Komponen Klien dan Interaktiviti

Pelajari masa dan cara menggunakan Komponen Klien untuk elemen UI interaktif yang memerlukan keadaan pada pihak klien.

Pelajaran 2 daripada 411 langkah

Komponen Klien dan Interaktiviti ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Kenali Komponen Klien

Selamat datang ke Komponen Klien! Dalam Next.js dengan Penghala Aplikasi, komponen secara lalai ialah Komponen Pelayan. Namun, kadangkala Anda memerlukan interaktiviti secara langsung dalam pelayar.

Komponen Klien ialah komponen khas yang berjalan pada klien, iaitu dalam pelayar web pengguna. Komponen ini penting untuk menambahkan ciri dinamik pada aplikasi Anda.

Pelayan berbanding Klien: Pandangan Ringkas

Mari kita imbas kembali dengan pantas: Komponen Pelayan dipaparkan pada pelayan dan sesuai untuk kandungan statik, pengambilan data serta mengurangkan JavaScript pada pihak klien.

Komponen Klien pula membolehkan:

Interaksi pengguna (klik dan perubahan input)
Pengurusan keadaan dengan Cangkuk React (useState, useEffect)
Akses kepada API khusus pelayar (localStorage, window)

Komponen ini menghidupkan UI Anda!

Mengapa Menggunakan Komponen Klien?

Anda patut menggunakan Komponen Klien apabila UI memerlukan interaktiviti. Fikirkan ciri web yang biasa:

Pembilang dan Togol: Sebarang elemen UI yang berubah berdasarkan input pengguna.
Borang: Medan input, pengesahan dan logik penghantaran.
Animasi: Animasi dan peralihan pada pihak klien.
Kemas Kini Masa Nyata: Komponen yang bertindak balas terhadap peristiwa WebSocket.
Logik Khusus Pelayar: Apa-apa sahaja yang memanipulasi DOM secara langsung atau menggunakan API pelayar.

Arahan 'use client'

Untuk memberitahu Next.js bahawa sesuatu komponen harus menjadi Komponen Klien, Anda hanya perlu menambahkan arahan "use client" di bahagian paling atas fail, sebelum sebarang import.

Arahan ini sangat penting! Arahan ini menandakan sempadan antara kod pada pelayan dan kod pada klien. Segala-galanya di bawahnya (termasuk modul yang diimport) akan dianggap sebagai sebahagian daripada himpunan klien.

Membina Pembilang Interaktif

Berikut ialah contoh klasik: pembilang mudah. Perhatikan arahan "use client" dan penggunaan Cangkuk React useState untuk mengurus count.

Pengendali onClick butang mengemas kini keadaan, lalu mencetuskan pemaparan semula dalam pelayar.

    "use client";
    import React, { useState } from 'react';

    export default function Counter() {
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>
            Increment
          </button>
        </div>
      );
    }

Mengendalikan Lebih Banyak Interaksi

Selain klik mudah, Komponen Klien sangat baik untuk mengurus input daripada pengguna. Berikut ialah contoh menggunakan medan input untuk mencerminkan teks semasa Anda menaip.

Pengendali peristiwa onChange mengemas kini keadaan komponen setiap kali nilai input berubah.

    "use client";
    import React, { useState } from 'react';

    export default function InputMirror() {
      const [text, setText] = useState('');

      return (
        <div>
          <input
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Type here..."
          />
          <p>You typed: {text}</p>
        </div>
      );
    }

Kesan pada Pihak Klien dengan useEffect

Hook useEffect ialah pilihan utama anda untuk kesan sampingan yang perlu dijalankan dalam pelayar, seperti menyediakan pemasa, mendapatkan data apabila komponen dipasang, atau melanggan acara luaran.

Komponen pemasa ini menggunakan useEffect untuk mengemas kini keadaan seconds setiap saat.

    "use client";
    import React, { useState, useEffect } from 'react';

    export default function Timer() {
      const [seconds, setSeconds] = useState(0);

      useEffect(() => {
        const interval = setInterval(() => {
          setSeconds(prev => prev + 1);
        }, 1000);
        return () => clearInterval(interval); // Cleanup function
      }, []); // Empty dependency array means run once on mount

      return (
        <p>Timer: {seconds} seconds</p>
      );
    }

Mengakses Ciri Pelayar

Memandangkan Komponen Klien berjalan dalam pelayar, komponen tersebut mempunyai akses penuh kepada API khusus pelayar dan objek global seperti window dan localStorage.

Contoh ini menunjukkan cara membaca daripada dan menulis ke localStorage, yang tidak tersedia dalam Komponen Pelayan.

    "use client";
    import React, { useState, useEffect } from 'react';

    export default function LocalStorageDisplay() {
      const [storedValue, setStoredValue] = useState('');

      useEffect(() => {
        // This code runs only on the client after hydration
        const item = localStorage.getItem('myKey');
        if (item) {
          setStoredValue(item);
        }
      }, []);

      const saveValue = () => {
        localStorage.setItem('myKey', 'Hello from CoddyKit!');
        setStoredValue('Hello from CoddyKit!');
      };

      return (
        <div>
          <p>Stored: {storedValue || 'Nothing yet!'}</p>
          <button onClick={saveValue}>
            Save to LocalStorage
          </button>
        </div>
      );
    }

Menyarang Komponen Klien

Anda boleh menyarang Komponen Klien dalam Komponen Klien yang lain, malah dalam Komponen Pelayan. Komponen Pelayan boleh memaparkan Komponen Klien sebagai anak.

Apabila Komponen Pelayan memaparkan Komponen Klien, JavaScript Komponen Klien tersebut dihantar ke pelayar dan komponen itu akan dihidratkan (menjadi interaktif) selepas dimuatkan.

Hal ini membolehkan anda membina UI yang kompleks, dengan bahagian statik dipaparkan oleh pelayan dan bahagian interaktif dipaparkan oleh klien.

Semakan Komponen Klien

Inilah masanya untuk menguji pemahaman anda tentang Komponen Klien!

Jawab dalam pelajaran interaktif

Komponen Klien: Kesimpulan Utama

Anda telah menguasai asas Komponen Klien!

Komponen ini ditandai dengan "use client" pada bahagian atas fail.
Komponen ini penting untuk interaktiviti, pengurusan keadaan dengan Hook (useState, useEffect) dan pengendalian acara.
Komponen ini boleh mengakses API khusus pelayar (contohnya, localStorage, window).
Komponen Pelayan boleh memaparkan Komponen Klien, yang membolehkan gabungan pemaparan oleh pelayan dan klien.

Seterusnya, kita akan meneroka corak pengambilan data yang lebih lanjut dengan memanfaatkan Komponen Pelayan dan Klien secara berkesan!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Komponen Klien dan Interaktiviti” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Komponen Klien dan Interaktiviti”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Komponen Klien dan Interaktiviti”?

Pelajari masa dan cara menggunakan Komponen Klien untuk elemen UI interaktif yang memerlukan keadaan pada pihak klien. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Komponen Klien dan Interaktiviti” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Penerokaan Mendalam Komponen Pelayan
Komponen Klien dan Interaktiviti
Corak Pengambilan Data Lanjutan
Pencachean, Pengesahan Semula dan Penstriman

← Kembali ke Aplikasi Web Fullstack Next.js 15