次の面接の準備: JavaScript と React の主要なトピック

JavaScript のトピック

1.吊り上げ

ホイスティングは、コードが実行される前のコンパイルフェーズ中に、変數(shù)と関數(shù)の宣言をそれらが含まれるスコープの先頭に移動する JavaScript のメカニズムです。これは、コード內(nèi)で実際に宣言される前に、変數(shù)や関數(shù)を參照できることを意味します。ただし、宣言のみがホイストされ、初期化はホイストされません。 var で宣言された変數(shù)の場合、それらはホイストされて未定義に初期化されますが、let と const はホイストされますが初期化されないため、宣言前にアクセスすると「一時的デッド ゾーン」エラーが発生します。関數(shù)宣言は完全にホイストされており、コードに出現(xiàn)する前に呼び出すことができます。

例:

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

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

関數(shù)宣言もホイストされます:

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

2.閉店

クロージャは、関數(shù)がその字句スコープの外で実行された場合でもその字句スコープへのアクセスを保持する JavaScript の機能です。これにより、関數(shù)は周囲のスコープから変數(shù)を「記憶」することができます。クロージャは、データのカプセル化、狀態(tài)の維持、または JavaScript でのプライベート変數(shù)の作成によく使用されます。これらは、関數(shù)が別の関數(shù)內(nèi)で定義され、內(nèi)側の関數(shù)が外側の関數(shù)の変數(shù)を參照するたびに形成されます。

例:

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

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

3.約束

Promise は、將來利用可能になる値のプレースホルダーを表します。これらは、従來のコールバック関數(shù)よりも効率的に非同期操作を処理するために使用され、「コールバック地獄」を軽減します。 Promise は、保留中、履行、または 拒否の 3 つの狀態(tài)のいずれかになります。 Promise が履行されるか拒否されると、その約束は不変になります。 Promise により、コードの可読性が向上し、非同期操作のチェーンが容易になります。

例:

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

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

4.関數(shù)のカリー化

関數(shù)カリー化は、複數(shù)の引數(shù)を持つ関數(shù)を、それぞれが 1 つの引數(shù)を取る一連の関數(shù)に変換する手法です。このアプローチは、元の関數(shù)のいくつかの引數(shù)を固定することによって再利用可能な関數(shù)を作成するために関數(shù)型プログラミングで広く使用されています。カリー化により、コードの可読性、再利用性、モジュール化が向上します。

例:

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

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

5.実行コンテキスト

実行コンテキストは、JavaScript コードが実行される環(huán)境を定義します。これには、特定の時點でアクセスできる変數(shù)、オブジェクト、関數(shù)が含まれます。実行コンテキストには 3 つのタイプがあります:

• グローバル実行コンテキスト: スクリプトが最初に実行されるときに作成されます。グローバル スコープで宣言された変數(shù)と関數(shù)は、このコンテキストの一部です。
• 関數(shù)実行コンテキスト: 関數(shù)が呼び出されるたびに作成され、そのローカル変數(shù)とパラメーターが含まれます。
• Eval 実行コンテキスト: ほとんど使用されず、eval() が呼び出されたときに作成されます。 実行コンテキストも this の値を決定し、スコープ チェーン.
の作成を伴います。

例:

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

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

6.電話、申し込み、バインド

これらは、関數(shù)を呼び出すときに this の値を明示的に設定するメソッドです。

• Call: 指定された this コンテキストと個別に渡された引數(shù)を使用して関數(shù)を呼び出します。
• Apply: 呼び出しと似ていますが、引數(shù)は配列として渡されます。
• Bind: すぐに呼び出すことなく、事前に設定された特定のコンテキストと引數(shù)を持つ新しい関數(shù)を返します。

例:

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

7.一般的なメソッドのポリフィル

ポリフィルは、ネイティブに利用できない環(huán)境で機能を?qū)g裝するコード スニペットです。これらにより、古いブラウザーやランタイム環(huán)境で Array.map、Promise、Object.assign などの最新の JavaScript 機能をサポートできるようになります。ポリフィルは互換性を確保するためによく使用され、欠落している機能の動作を模倣するフォールバック ロジックを使用して実裝されます。

例: 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

反応トピック

1.和解

調(diào)整は、仮想 DOM と一致するように DOM を更新する React のプロセスです。 React は差分アルゴリズムを使用して必要な更新の最小數(shù)を決定し、レンダリングを効率的にします。 state や props が変更されると、React は新しい仮想 DOM を作成し、以前のものと比較し、変更された部分のみを更新します。

2.フック

フックは、機能コンポーネントが、以前はクラス コンポーネントでのみ使用可能であった狀態(tài)メソッドやライフサイクル メソッドなどの機能を使用できるようにする関數(shù)です。例としては、狀態(tài)管理の useState や副作用の useEffect などがあります。フックにより、React コードがより簡潔になり、機能コンポーネントがより強力になります。

例:

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

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

3.クラスと機能コンポーネント

クラスコンポーネントは、狀態(tài)メソッドとライフサイクルメソッドにこれを使用する ES6 クラスです。機能コンポーネントは、UI をレンダリングする?yún)g純な関數(shù)です。フックの導入により、機能コンポーネントはクラスを必要とせずに狀態(tài)とライフサイクルを管理できるようになります。機能コンポーネントは、そのシンプルさとパフォーマンスの向上のために好まれます。

クラスコンポーネントの例:

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

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

4.メモ化

メモ化は、不必要な再計算や再レンダリングを防ぐために使用されるパフォーマンス最適化手法です。 React では、メモ化により、プロパティまたは狀態(tài)が変更された場合にのみコンポーネントが再レンダリングされることが保証されます。これは、計算コストが高いコンポーネントや頻繁に更新されるコンポーネントで特に役立ちます。

例:

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

5.高次成分 (HOC)

HOC は React の設計パターンであり、関數(shù)がコンポーネントを入力として受け取り、そのコンポーネントの拡張バージョンを返します。 HOC は一般に、コードの再利用、狀態(tài)の管理、ログや認証などの機能の追加に使用されます。

例:

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

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

6.パフォーマンス

React のパフォーマンスを向上するには、不必要な再レンダリングの回避、コンポーネントの遅延読み込み、React.memo または useMemo を使用したレンダリングの最適化などのテクニックが必要です。開発者は、ボトルネックを特定するために React Profiler などのツールも使用します。

7. React ルーター

React Router は、React アプリケーションのナビゲーションを管理するためのライブラリです。これにより、開発者はルートを定義し、URL に基づいてコンポーネントを動的にレンダリングできます。機能には、ネストされたルート、ルート パラメーター、ナビゲーション ガードが含まれます。

例:

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

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

8.キャッシング

React でのキャッシュには、再フェッチを避けるために頻繁に使用されるデータを保存することが含まれます。これは、react-query、Redux、localStorage などのライブラリを使用して実現(xiàn)できます。キャッシュによりロード時間が短縮され、パフォーマンスとユーザー エクスペリエンスが向上します。

9.セキュリティ

React アプリケーションを保護するには、開発者はユーザー入力を検証してサニタイズし、HTTPS を使用し、XSS 攻撃を防ぐためにインライン JavaScript を避ける必要があります。 Helmet のようなライブラリは、安全な HTTP ヘッダーの設定に役立ちます。認証と認可も安全に実裝する必要があります。

10.パフォーマンスの向上

パフォーマンスは次の方法で改善できます:

• コード分割によるバンドル サイズの削減。
• 不必要な狀態(tài)更新を回避します。
• 遅延読み込みに React.lazy を使用します。
• 畫像とアセットの最適化。
• 計算タスクに効率的なアルゴリズムを使用します。

11.メモリ リーク

メモリ リークは、オブジェクトが使用されなくなったが、ガベージ コレクションが行われていない場合に発生します。 React では、イベント リスナー、タイマー、サブスクリプションの不適切なクリーンアップによってリークが発生することがよくあります。 useEffect をクリーンアップ関數(shù)とともに使用すると、適切なクリーンアップが確保され、このような問題が防止されます。

使用中のサブスクリプションまたはタイマーをクリーンアップする効果:

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

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

結論として、JavaScript と React の核となる概念を習得することは、堅牢で効率的なアプリケーションの構築を目指す開発者にとって非常に重要です。これらの原則は、Web 開発の基礎を形成するだけでなく、複雑な課題に自信を持って取り組む準備にもなります。クロージャの理解、React によるパフォーマンスの最適化、セキュリティのベスト プラクティスの実裝など、これらのトピックを深く理解することで、面接やキャリアで差別化を図ることができます。常に進化し続けるプログラミングの世界では、學習の旅が真に終わることはないので、スキルを探索し、練習し、磨き続けてください。

以上が面接用の究極の JavaScript と React チートシートの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。