Rumah >hujung hadapan web >tutorial js >Memahami Arahan \'use client\' dalam Next.js 13
Dalam Next.js 13, pengenalan direktori apl baharu telah membawa perubahan ketara dalam cara komponen dipaparkan. Secara lalai, komponen dalam direktori aplikasi dianggap sebagai komponen pelayan, yang dipaparkan pada pelayan. Tingkah laku lalai ini dioptimumkan untuk prestasi dan pengambilan data tetapi disertakan dengan pengehadan apabila melibatkan interaktiviti pihak pelanggan. Untuk menangani perkara ini, Next.js 13 memperkenalkan arahan "gunakan klien", yang secara eksplisit menetapkan komponen atau fail sebagai JavaScript sisi klien.
Jika komponen perlu berinteraksi dengan penyemak imbas (cth., mengendalikan acara pengguna seperti klik atau mengakses storan setempat), ia mesti ditandakan dengan "guna klien". Ini kerana komponen pelayan tidak boleh mengakses API penyemak imbas, pendengar acara atau ciri sisi klien yang lain.
Cangkuk seperti useState, useEffect, useRef, dsb., hanya boleh digunakan dalam komponen klien. Oleh itu, menandakan fail atau komponen dengan "use client" adalah perlu apabila menggunakan cangkuk ini.
Pengendali acara bertindak balas (seperti onClick, onChange) memerlukan komponen untuk dijalankan dalam penyemak imbas. Akibatnya, komponen tersebut hendaklah ditandakan sebagai komponen pelanggan.
Anda meletakkan "guna klien" di bahagian atas fail untuk mana-mana komponen yang perlu diberikan pada bahagian klien:
"use client"; import { useState } from "react"; export default function MyComponent() { const [count, setCount] = useState(0); return ( <div> <p>{count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
Ia mesti diletakkan di bahagian atas fail, sebelum sebarang import atau kod lain.
Apabila anda menambahkan "gunakan klien" pada fail, semua komponen di dalam fail itu menjadi komponen klien, bermakna ia disatukan dan dijalankan pada penyemak imbas.
Adalah disyorkan untuk menggunakannya hanya jika perlu kerana komponen pelayan lebih cekap dari segi prestasi dan pengambilan data.
Ringkasnya, arahan "gunakan klien" diperlukan apabila anda ingin membina komponen interaktif pihak klien dalam rangka kerja yang, secara lalai, mengutamakan pemaparan dan pengoptimuman bahagian pelayan. Dengan menandai komponen secara eksplisit sebagai bahagian pelanggan, anda boleh memanfaatkan kuasa penuh ciri sisi klien React, seperti cangkuk dan pengendalian acara, sambil masih mendapat manfaat daripada kelebihan prestasi pemaparan bahagian pelayan yang sesuai.
Baki ini membolehkan pembangun mencipta aplikasi web yang sangat interaktif dan berprestasi, mengambil kesempatan daripada pemaparan bahagian pelayan dan pelanggan mengikut keperluan.
Atas ialah kandungan terperinci Memahami Arahan \'use client\' dalam Next.js 13. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!