Lembaran Penipuan JavaScript dan React Terunggul Anda untuk Temuduga

Bersedia untuk Temuduga Anda Seterusnya: JavaScript Utama dan Topik Reaksi

Topik JavaScript

1. Mengangkat

Hoisting ialah mekanisme JavaScript untuk memindahkan pembolehubah dan pengisytiharan fungsi ke bahagian atas skop kandungannya semasa fasa penyusunan, sebelum kod dilaksanakan. Ini bermakna anda boleh merujuk pembolehubah dan fungsi sebelum ia benar-benar diisytiharkan dalam kod. Walau bagaimanapun, hanya pengisytiharan yang dinaikkan, bukan permulaan. Untuk pembolehubah yang diisytiharkan dengan var, ia dinaikkan dan dimulakan kepada tidak ditentukan, manakala let dan const dinaikkan tetapi tidak dimulakan, menyebabkan ralat "zon mati sementara" jika diakses sebelum pengisytiharan. Pengisytiharan fungsi dinaikkan sepenuhnya, bermakna ia boleh dipanggil sebelum ia muncul dalam kod.

Contoh:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

Pengisytiharan fungsi juga dinaikkan:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

2. Penutupan

Penutupan ialah ciri dalam JavaScript di mana fungsi mengekalkan akses kepada skop leksikalnya walaupun apabila dilaksanakan di luar skop tersebut. Ini membolehkan fungsi "mengingat" pembolehubah daripada skop sekelilingnya. Penutupan sering digunakan untuk pengkapsulan data, mengekalkan keadaan atau mencipta pembolehubah peribadi dalam JavaScript. Ia terbentuk apabila fungsi ditakrifkan di dalam fungsi lain dan fungsi dalam merujuk pembolehubah dalam fungsi luar.

Contoh:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

3. Janji

Janji mewakili pemegang tempat untuk nilai yang akan tersedia pada masa hadapan. Ia digunakan untuk mengendalikan operasi tak segerak dengan lebih berkesan daripada fungsi panggil balik tradisional, mengurangkan "neraka panggil balik." Janji boleh berada dalam salah satu daripada tiga keadaan: belum selesai, ditepati atau ditolak. Apabila janji sama ada dipenuhi atau ditolak, ia menjadi tidak berubah. Janji meningkatkan kebolehbacaan kod dan menjadikannya lebih mudah untuk merantai operasi tak segerak.

Contoh:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

4. Fungsi Karipap

Fungsi kari ialah teknik di mana fungsi dengan berbilang argumen diubah menjadi urutan fungsi, masing-masing mengambil satu argumen. Pendekatan ini digunakan secara meluas dalam pengaturcaraan berfungsi untuk mencipta fungsi boleh guna semula dengan membetulkan beberapa hujah fungsi asal. Currying membolehkan kebolehbacaan kod, kebolehgunaan semula dan modularisasi yang lebih baik.

Contoh:

function add(a) {
  return function(b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(3)); // 8

5. Konteks Pelaksanaan

Konteks pelaksanaan mentakrifkan persekitaran di mana kod JavaScript dilaksanakan. Ia termasuk pembolehubah, objek dan fungsi yang boleh diakses pada masa tertentu. Terdapat tiga jenis konteks pelaksanaan:

• Konteks Pelaksanaan Global: Dibuat apabila skrip mula dijalankan. Pembolehubah dan fungsi yang diisytiharkan dalam skop global adalah sebahagian daripada konteks ini.
• Konteks Perlaksanaan Fungsi: Dibuat apabila fungsi dipanggil, mengandungi pembolehubah dan parameter setempatnya.
• Konteks Pelaksanaan Eval: Jarang digunakan, dibuat apabila eval() digunakan. Konteks pelaksanaan juga menentukan nilai ini dan melibatkan penciptaan rantai skop.

Contoh:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

6. Panggil, Mohon, Ikat

Ini ialah kaedah untuk menetapkan nilai ini secara eksplisit apabila menggunakan fungsi.

• Panggil: Mendapat fungsi dengan konteks ini dan hujah yang diberikan secara individu.
• Gunakan: Sama seperti panggilan, tetapi hujah dihantar sebagai tatasusunan.
• Ikat: Mengembalikan fungsi baharu dengan konteks dan hujah yang dipraset khusus ini, tanpa menggunakan fungsi itu serta-merta.

Contoh:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

7. Polyfills untuk Kaedah Biasa

Polyfill ialah coretan kod yang melaksanakan ciri dalam persekitaran yang tidak tersedia secara asli. Mereka membenarkan pelayar lama atau persekitaran masa jalan untuk menyokong ciri JavaScript moden seperti Array.map, Promise atau Object.assign. Polyfills sering digunakan untuk memastikan keserasian dan dilaksanakan menggunakan logik sandaran yang meniru gelagat ciri yang tiada.

Contoh: Array.prototype.map Polyfill:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

Topik React

1. Penyesuaian

Rekonsiliasi ialah proses React untuk mengemas kini DOM agar sepadan dengan DOM maya. React menggunakan algoritma pembezaan untuk menentukan bilangan minimum kemas kini yang diperlukan, menjadikan pemaparan cekap. Apabila keadaan atau prop berubah, React mencipta DOM maya baharu, membandingkannya dengan yang sebelumnya dan mengemas kini bahagian yang telah berubah sahaja.

2. Cangkuk

Cangkuk ialah fungsi yang membenarkan komponen berfungsi menggunakan ciri seperti kaedah keadaan dan kitaran hayat, yang sebelum ini hanya tersedia dalam komponen kelas. Contohnya termasuk useState untuk pengurusan negeri dan useEffect untuk kesan sampingan. Cangkuk menjadikan kod React lebih ringkas dan komponen berfungsi lebih berkuasa.

Contoh:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

3. Kelas lwn Komponen Fungsi

Komponen kelas ialah kelas ES6 yang menggunakan ini untuk kaedah keadaan dan kitaran hayat. Komponen fungsional ialah fungsi mudah yang menjadikan UI. Dengan pengenalan cangkuk, komponen berfungsi boleh mengurus keadaan dan kitaran hayat tanpa memerlukan kelas. Komponen berfungsi lebih disukai kerana kesederhanaan dan prestasi yang lebih baik.

Contoh komponen kelas:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

4. Menghafal

Memoisasi ialah teknik pengoptimuman prestasi yang digunakan untuk mengelakkan pengiraan semula atau pemaparan semula yang tidak perlu. Dalam React, penghafalan memastikan komponen dipaparkan semula hanya apabila prop atau keadaannya berubah. Ini amat berguna dalam komponen yang mahal dari segi pengiraan atau mempunyai kemas kini yang kerap.

Contoh:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

5. Komponen Pesanan Tinggi (HOC)

HOC ialah corak reka bentuk dalam React di mana fungsi mengambil komponen sebagai input dan mengembalikan versi komponen yang dipertingkatkan. HOC biasanya digunakan untuk penggunaan semula kod, mengurus keadaan dan menambahkan fungsi seperti pengelogan atau pengesahan.

Contoh:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

6. Prestasi

Meningkatkan prestasi React melibatkan teknik seperti mengelakkan pemaparan semula yang tidak perlu, malas memuatkan komponen dan mengoptimumkan pemaparan menggunakan React.memo atau useMemo. Pembangun juga menggunakan alatan seperti React Profiler untuk mengenal pasti kesesakan.

7. Penghala Reaksi

React Router ialah perpustakaan untuk mengurus navigasi dalam aplikasi React. Ia membolehkan pembangun mentakrifkan laluan dan memaparkan komponen secara dinamik berdasarkan URL. Ciri termasuk laluan bersarang, parameter laluan dan pengawal navigasi.

Contoh:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

8. Cache

Caching dalam React melibatkan penyimpanan data yang kerap digunakan untuk mengelakkan pengambilan semula. Ini boleh dicapai menggunakan perpustakaan seperti react-query, Redux, atau localStorage. Caching meningkatkan prestasi dan pengalaman pengguna dengan mengurangkan masa muat.

9. Keselamatan

Untuk melindungi aplikasi React, pembangun harus mengesahkan dan membersihkan input pengguna, menggunakan HTTPS dan mengelakkan JavaScript sebaris untuk mengelakkan serangan XSS. Perpustakaan seperti Helmet membantu menetapkan pengepala HTTP yang selamat. Pengesahan dan kebenaran juga harus dilaksanakan dengan selamat.

10. Meningkatkan Prestasi

Prestasi boleh dipertingkatkan dengan:

• Mengurangkan saiz berkas dengan pemisahan kod.
• Mengelakkan kemas kini keadaan yang tidak perlu.
• Menggunakan React.lazy untuk memuatkan malas.
• Mengoptimumkan imej dan aset.
• Menggunakan algoritma yang cekap untuk tugas pengiraan.

11. Kebocoran Memori

Kebocoran memori berlaku apabila objek tidak lagi digunakan tetapi tidak dikumpul sampah. Dalam React, kebocoran selalunya timbul daripada pembersihan pendengar, pemasa atau langganan acara yang tidak betul. Menggunakan useEffect dengan fungsi pembersihan memastikan pembersihan yang betul, mengelakkan masalah sedemikian.

Bersihkan langganan atau pemasa yang sedang digunakanKesan:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

Kesimpulannya, menguasai konsep teras JavaScript dan React adalah penting bagi mana-mana pembangun yang bertujuan membina aplikasi yang mantap dan cekap. Prinsip-prinsip ini bukan sahaja membentuk asas pembangunan web tetapi juga menyediakan anda untuk menangani cabaran yang kompleks dengan yakin. Sama ada memahami penutupan, mengoptimumkan prestasi dengan React, atau melaksanakan amalan terbaik keselamatan, pemahaman mendalam tentang topik ini akan membezakan anda dalam temu duga dan dalam kerjaya anda. Teruskan meneroka, berlatih dan memperhalusi kemahiran anda—kerana perjalanan pembelajaran tidak pernah benar-benar berakhir dalam dunia pengaturcaraan yang sentiasa berkembang.

Atas ialah kandungan terperinci Lembaran Penipuan JavaScript dan React Terunggul Anda untuk Temuduga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!