面接用の究極の JavaScript と React チートシート

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

JavaScript のトピック

1.吊り上げ

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

例:

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

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

関数宣言もホイストされます:

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

2.閉店

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

例:

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

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

3.約束

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

例:

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

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

4.関数のカリー化

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

例:

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

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

5.実行コンテキスト

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

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

例:

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

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

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

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

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

例:

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

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

ポリフィルは、ネイティブに利用できない環境で機能を実装するコード スニペットです。これらにより、古いブラウザーやランタイム環境で 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.和解

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

2.フック

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

例:

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

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

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

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

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

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

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

4.メモ化

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

例:

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

5.高次成分 (HOC)

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

例:

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 などのライブラリを使用して実現できます。キャッシュによりロード時間が短縮され、パフォーマンスとユーザー エクスペリエンスが向上します。

9.セキュリティ

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

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

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

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

11.メモリ リーク

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

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

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

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

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

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