【随時更新】フロントエンド分野必読の面接質問集

1. 前に書く

  時々、他の分野の友人がプライベートメッセージを送って、C++、C#、大きなフロントエンドなど、知識の盲点に触れるブロガー以外の分野に関連した質問をすることがあります。

多くの友人がインタビューについて質問してきました。前の記事に、Python 分野のインタビューの概要に関する固定記事がありました。時間があるときに引き続き更新し、貴重な質問をその記事に含めていきます。ご興味があれば、 あなたは読むことができます：

参考価値の高いPythonの面接質問！スタートアップから一流メーカーまでの実体験まとめ（随時更新）

最近、何人かの友人が面接のフロントエンドの質問について質問してきたので、専門的な観点から要約するのは正直難しいのですが、誰もが必要としているので、週末や一部の時間に関連分野の友人に相談しました。問題点をまとめたのでこの記事にしましたので、お役に立てれば幸いです。

フロントエンドの天井は非常に低く、VPは珍しいですか？究極のチームのリーダー?一掴みの米をキーボードの上に投げますか？フロントエンドに関するジョークはたくさんありますが、どれも重要ではありません。自分の分野を深く掘り下げれば、あなたも専門家になれます!

2. フロントエンドインタビューの概要

2.0.1. Webpack のパッケージ化速度を向上させる方法

• ローダーの最適化
    ローダーに関しては、Babel がパッケージング効率への影響の矢面に立たされる必要があります。 Babel はコードを文字列に変換して AST を生成し、その後 AST の変換を続けて最終的に新しいコードを生成するため、プロジェクトが大きくなるほど変換されるコードの量が増え、効率が低下します。もちろん、これは最適化することができます

まず、Loader のファイル検索範囲を最適化します。

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}

Babel の場合は、JS コード上でのみ動作することを望みます。また、node_modules で使用されるコードはコンパイルされているため、再度処理する必要はありません。

もちろん、これだけでは十分ではなく、Babel によってコンパイルされたファイルをキャッシュすることもでき、次回は変更されたコード ファイルをコンパイルするだけで済み、パッケージ化時間を大幅に短縮できます。

2.0.2. アレイの重複排除

  古い配列を走査し、古い配列要素を使用して新しい配列をクエリします。要素が新しい配列にない場合は追加し、そうでない場合は追加しません。まず、一意の関数をカプセル化します。

function unique(arr){
    
    
var newArr =\[]
for(var i =0; i< arr.length; i++){
    
    
if (newArr.indexOf(arr\[i] === -1){
    
    
newArr.push(arr\[i])
}
}
return newArr
}
var demo = unique(\[])
console.log(demo)

2.0.3. フロントエンドにはキャッシュメソッドがいくつありますか?

• sessionStorage
  ただし、ページを閉じると、sessionStorage 内のデータは消去されます。 Indexdb (50mb) は、大量のデータの保存を可能にし、検索インターフェイスを提供し、非同期操作をサポートし、インデックスを作成することもできます。 IndexDB の欠点は、DO 操作をサポートしていないこと、ドメインを越えることができないこと
• localStorage
  5M サイズではデータを文字列形式でのみ保存できるため、データを保存するたびに json 形式に変換し、取り出すときに元に戻すことをお勧めします。ライフサイクルは永続的であり、データが積極的に削除されない限り、 データが消えることはありません
• cookiec
  Cookie がクライアントのブラウザに設定されると、数日、数か月、場合によっては数年にわたって存続することがあります。これにより、サーバー リソースを必要とせずにユーザーの設定とアクセス情報を簡単に保存でき、ユーザーのコンピュータに保存されるため、サーバーに追加の負担をかけることはありません。確かに非常に小さいです。サイズは約 4KB に制限されています。大きなデータを保存できず、読み取りも簡単ではありません。

2.0.4. nextTick について説明しますか?

非同期レンダリングの最後のステップである非同期メソッドは、JS イベント ループと密接に関連しています。主にマクロタスクとマイクロタスク(setTimeout、Promiseなど)を使用し、非同期メソッドを定義しており、nextTickを複数回呼び出すとメソッドがキューに保存され、非同期メソッドを通じて現在のキューがクリアされます。

2.0.5. Webpack レベルの最適化?

Webpack による画像の圧縮
ES6 から ES5 への冗長コードの削減
共通コードの抽出
テンプレートのプリコンパイル Vue プロジェクト コンパイルの最適化 ビルド結果出力分析 SourceMap の最適化
コンポーネント CSS の抽出

2.0.6. コードレベルの最適化?

v-if と v-show は使用シナリオを区別します
計算および監視は使用シナリオを区別します
v-for トラバーサルはアイテムにキーを追加する必要がありますおよび v-if の同時使用を避ける
長いリストのパフォーマンスの最適化
イベントの破棄
画像リソースの遅延読み込み< /span> 無限リストのパフォーマンスの最適化 サードパーティ プラグインのオンデマンド導入
ルートの遅延読み込み

2.0.7. Web テクノロジーの最適化?

gzip 圧縮、ブラウザ キャッシュ、CDN の使用を有効にし、Chrome パフォーマンスを使用してパフォーマンスのボトルネックを見つけます。

2.0.8. diff アルゴリズムの最適化戦略?

4 つのヒット検索、4 つのポインター

1. 以前の古い投稿と前の新しい投稿 (最初に先頭を比較し、次にノードを挿入して削除します)
2. 古い投稿と新しい投稿 (末尾を比較し、前に挿入または削除します)削除の場合）
3. 古いフロントと新しいバック（先頭と末尾の比率、これが発生した場合、ノードの移動が含まれるため、新しいフロントが指すノードが移動されます）古いものの背面) a>
4. 古い背面と新しい前面 (尾部と頭の比率、これが発生した場合はノードを移動する必要があり、ノードが指す新しいフロントによって、古いフロントの前に移動されます)

2.0.9. イベントループ? JSでも動作するのでしょうか？

イベント ループは、非同期コードの実行を処理する JavaScript のメカニズムです。非同期タスクのスケジュールと実行を管理し、それらを実行キューに追加します。
JavaScript におけるイベント ループの役割は、非同期タスクが正しい順序で実行され、メイン スレッドをブロックしないようにすることです。実行キューからタスクを継続的に取得して実行することにより、ノンブロッキングの非同期操作を実装します

2.1.0. ブラウザキャッシュとその機能?

ブラウザ キャッシュとは、ブラウザが Web ページとリソースのコピーをローカルに保存し、次回以降のアクセス時にすぐに読み込めるようにするものです。その機能は、サーバーへのリクエスト数とネットワーク送信量を削減し、ページの読み込み速度とユーザーエクスペリエンスを向上させることです。
ブラウザのキャッシュは、最初のリクエストでリソースをローカルに保存し、その後のリクエストでリソースがすでに存在し、有効期限が切れていないかどうかを確認することによって機能します。リソースがすでに存在し、有効期限が切れていない場合、ブラウザはサーバーからリソースを再ダウンロードするのではなく、キャッシュから直接リソースを読み込みます

2.1.1. Web ワーカーの役割は何ですか?

Web Workers は、メイン スレッドのブロックを回避するために、時間のかかるコンピューティング タスクをバックグラウンド スレッドで実行するためにブラウザによって提供される JavaScript API です。
Web ワーカーの役割は、複雑な計算を実行したり、大量のデータを処理したりするときに、ユーザー インターフェイスの滑らかさが影響を受けないよう、ブラウザの応答性を向上させることです。
Web ワーカーはタスクをバックグラウンド スレッドに委任することで並列処理を実装し、マルチコア プロセッサの機能を最大限に活用します。メインスレッドと通信できますが、DOM に直接アクセスしたり、UI 関連の操作を実行したりすることはできません

2.1.2. ブラウザのガベージコレクションメカニズム?

ブラウザのガベージ コレクション メカニズムは、メモリ リソースを解放するために使用されなくなったオブジェクトを検出してリサイクルするために使用される自動メモリ管理メカニズムです。
ガベージ コレクション メカニズムは、マークスイープ アルゴリズムを通じて実装されます。次のように動作します:
マーキング フェーズ: ガベージ コレクターはルート オブジェクト (グローバル オブジェクトなど) から開始し、すべてのオブジェクトを再帰的に走査し、まだアクセス可能なオブジェクトをマークします。
クリーンアップ フェーズ: ガベージ コレクターはヒープ メモリをスキャンし、マークされていないオブジェクトをクリアし、オブジェクトが占有しているメモリ領域を再利用します。
ガベージ コレクション メカニズムの目的は、メモリ リークを回避し、メモリ使用率を向上させるために、使用されなくなったオブジェクトを特定してリサイクルすることです。

2.1.3. 仮想 DOM の実装原理は何ですか?

仮想 DOM は本質的に JavaScript オブジェクトであり、実際の DOM を抽象化したものです
状態が変化すると、新しいツリーと古いツリーの違いが記録されます< a i=2> 最後に、実際の dom との差分を更新します

3. CSS関連まとめ

3.0.1. CSS ではカスケード順序はどのように機能しますか?

積み重ね順序 (z インデックス) は、垂直方向の要素の積み重ね順序を制御するために使用されます。積み重ね順序の値が高い要素は、積み重ね順序の値が低い要素の上に表示されます。デフォルトでは、積み重ね順序の値は auto です。

3.0.2. CSS の疑似クラスと疑似要素の違いは何ですか?例？

疑似クラスは、:hover、:active などの特殊な状態をセレクターに追加するために使用されます。疑似要素は、::before、::after などの特別な要素をセレクターに追加するために使用されます。

/* 伪类示例 */
a:hover {
    
    
  color: red;
}

/* 伪元素示例 */
p::before {
    
    
  content: "前缀";
}

3.0.3. v-if と v-for ではどちらの方が優先されますか?

vue2 では、v-for の優先順位が v-if よりも高くなります
vue3 では、まったく逆で、v-if の優先順位が v-for よりも高くなります >

3.0.4. CSS における BFC の機能は何ですか?

BFC (ブロック レベル フォーマット コンテキスト) は、要素が特定のルールに従ってレイアウトおよび配置される独立したレンダリング環境を作成する CSS のレンダリング モードです。 BFC の機能には、フロートのクリアとマージンの重複の防止が含まれます。

3.0.5. CSS のフレックスボックス レイアウトとは何ですか?またその利点は何ですか?

Flexbox レイアウトは、柔軟で応答性の高いレイアウトを作成するための CSS モジュールです。フレックス コンテナとフレックス アイテムの組み合わせにより、強力なレイアウト機能を実現します。その利点には、使いやすさ、強力な適応性、柔軟な位置合わせと分布制御が含まれます。

3.0.6. CSS ボックス モデルとは何ですか?説明してください。

CSS ボックス モデルは、要素のレイアウトと配置に使用される概念です。これは、コンテンツ領域、パディング、境界線、およびマージンで構成され、要素の周囲を囲みます。

3.0.7. CSS でセレクターとその優先順位を説明しますか?

CSS セレクターは、スタイルを適用する HTML 要素を選択するために使用されます。セレクターの優先順位ルールは、インライン スタイル > ID セレクター > クラス セレクター、属性セレクター、疑似クラス セレクター > 要素セレクター > ユニバーサル セレクターです。同時に、! important を使用すると、スタイルの優先順位を上げることができます。

4. Vue関連のまとめ

4.0.1. v-if と v-for ではどちらの方が優先されますか?

  vue2 では v-if よりも v-for の方が優先度が高いので、これらをまとめると、出力描画関数を見ると、たとえ小さな描画をしただけでも、最初にループが実行され、その後に条件が判断されることがわかります。リスト内の要素の一部を再レンダリングするたびにリスト全体を走査する必要もありますが、これはより無駄です; さらに、vue3 ではまったく逆であることに注意してください。 v-for よりも優先度が高いため、v-if を実行すると、呼び出された変数がまだ存在しない場合、例外が発生します。

4.0.2. 3.0 の機能について説明してください。

• 監視メカニズムの変更
  3.0 では、プロキシ Proxy に基づくオブザーバー実装が導入され、完全な言語をカバーするリアクティブな追跡が提供されます。これにより、Vue 2 の Object.defineProperty ベースの実装の多くの制限が解消されます: (オブジェクトではなくプロパティのみを監視でき、プロパティの追加と削除を検出し、配列のインデックスと長さの変更を検出し、Map、Set、WeakMap、WeakSet をサポート)< /span>
• テンプレート
  テンプレートに大きな変更はありません。スコープ スロットのみが変更されます。2.x メカニズムによりスコープ スロットが変更され、親コンポーネントが変更されます。 -rendered が追加され、3.0 ではスコープ スロットが関数に変更されました。これはサブコンポーネントの再レンダリングにのみ影響し、レンダリング パフォーマンスが向上します。
  同時に、vue3.0 では、API を直接使用して vdom を生成することに慣れやすくするために、レンダリング関数にも一連の変更が加えられます。
• オブジェクト スタイルのコンポーネント宣言
  vue2.x のコンポーネントは宣言を通じて一連のオプションで渡され、TypeScript との組み合わせはいくつかのデコレータを通じて行う必要があります。機能は実現できますが、さらに面倒です。 3.0ではコンポーネントの宣言方法が修正され、TypeScriptと連携しやすいクラス記述方法に変更されました。
  また、vue のソースコードも TypeScript で書かれています。実際、コードの機能が複雑な場合、補助的な管理を行うために静的型システムが必要になります。現在、vue3.0 は TypeScript で完全に書き直されており、TypeScript と外部公開 API を簡単に組み合わせることができるようになりました。静的型システムは、複雑なコードの保守には確かに必要です
• その他の変更点
  (1) カスタム レンダラーをサポートし、ソース コードを直接フォークする代わりにレンダラーをカスタマイズすることで Weex を拡張できるようになります。
  (2) Fragment (複数のルート ノード) および Protal (dom の他の部分でコンテンツをレンダリング) コンポーネントをサポートし、いくつかの特殊なシナリオに対処しました
  (3) ツリーシェーキング最適化に基づいて、より多くの構築-in 関数が提供されています

4.0.3. vue ではどのようなデザインパターンが使用されていますか?

• ファクトリー モード: 仮想 DOM は、さまざまなパラメータに従ってベース タグの Vnode とコンポーネント Vnode

• シングルケース モード: vuex および vue-router install のプラグイン登録メソッドは、システム内にインスタンスがあるかどうかを判断し、それを直接返します

• パブリッシュ/サブスクライブ モデル (vue イベント メカニズム)

• オブザーバーパターン (リアクティブデータ原則)

• デコレーションモード：（@decoratorの使用）

• 戦略モード: 特定の動作を持つオブジェクトを指しますが、シナリオが異なると、その動作にはオプションの結合戦略など、異なる実装ソリューションが適用されます

4.0.4. テンプレートのコンパイル原理

Vue のコンパイルプロセスは、テンプレートをレンダリング関数に変換するプロセスであり、次の 3 つのステップに分かれています。

1. テンプレート文字列を要素 AST に変換します (パーサー)
2. 主に仮想 DOM レンダリングの最適化に使用される AST の静的ノード マーキング (オプティマイザー)
3. 要素 AST を使用してレンダー関数コード文字列を生成します (コード ジェネレーター)

export function compileToFunctions(template) {
    
    
  // 我们需要把html字符串变成render函数
  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法
  // 很多库都运用到了ast 比如 webpack babel eslint等等
  let ast = parse(template);
  // 2.优化静态节点
  // 这个有兴趣的可以去看源码  不影响核心功能就不实现了
  //   if (options.optimize !== false) {
    
    
  //     optimize(ast, options);
  //   }

  // 3.通过ast 重新生成代码
  // 我们最后生成的代码需要和render函数一样
  // 类似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))
  // _c代表创建元素 _v代表创建文本 _s代表文Json.stringify--把对象解析成文本
  let code = generate(ast);
  //   使用with语法改变作用域为this  之后调用render函数可以使用call改变this 方便code里面的变量取值
  let renderFn = new Function(`with(this){return ${
      
      code}}`);
  return renderFn;
}

4.0.5. レスポンシブ原則の違いは何ですか?

Vue3.x は、Object.defineProperty の代わりに Proxy を使用します。プロキシはオブジェクトと配列の変更を直接監視でき、最大 13 個のインターセプト メソッドを備えているためです。

import {
    
     mutableHandlers } from "./baseHandlers"; // 代理相关逻辑
import {
    
     isObject } from "./util"; // 工具方法

export function reactive(target) {
    
    
  // 根据不同参数创建不同响应式对象
  return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {
    
    
  if (!isObject(target)) {
    
    
    return target;
  }
  const observed = new Proxy(target, baseHandler);
  return observed;
}

const get = createGetter();
const set = createSetter();

function createGetter() {
    
    
  return function get(target, key, receiver) {
    
    
    // 对获取的值进行放射
    const res = Reflect.get(target, key, receiver);
    console.log("属性获取", key);
    if (isObject(res)) {
    
    
      // 如果获取的值是对象类型，则返回当前对象的代理对象
      return reactive(res);
    }
    return res;
  };
}
function createSetter() {
    
    
  return function set(target, key, value, receiver) {
    
    
    const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {
    
    
      console.log("属性新增", key, value);
    } else if (hasChanged(value, oldValue)) {
    
    
      console.log("属性值被修改", key, value);
    }
    return result;
  };
}
export const mutableHandlers = {
    
    
  get, // 当获取属性时调用此方法
  set, // 当修改属性时调用此方法
};

4.0.6. 双方向データ バインディングはどのように実装されますか?

Vue の双方向データ バインディングは、v-model ディレクティブを通じて実装されます。 v-model は、フォーム要素 (,, など) に双方向のデータ バインディングを作成できます。ユーザー入力によってフォーム要素の値が変更されると、データ モデルは自動的に更新され、逆に、データ モデルの値が変更されると、フォーム要素も自動的に更新されます。

4.0.7. ライフサイクルフック?実行命令？

Vue のライフサイクル フックには、beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroy が含まれます。それらの実行順序は次のとおりです。

beforeCreate、作成前Mount、マウント済み、beforeUpdate、更新前Destroy、破棄済み

4.0.8. ルーティングはどのように実装されますか?

Vue のルーティングは、Vue Router を通じて実装されます。 Vue Router は、Vue.js によって公式に提供されるルーティング マネージャーであり、開発者が Vue アプリケーションにシングル ページ アプリケーション (SPA) を実装できるようにします。 Vue Router は、ルート マッピング関係を構成することで URL パスをコンポーネントに関連付け、ユーザーがページを更新せずにビューを切り替えることができるナビゲーション機能を提供します。

4.0.9. 監視と計算の違いは何ですか?

watch と computed はどちらもデータの変更を監視するために使用できますが、その使用方法と実装は若干異なります。 Watch は、指定されたデータの変更を監視し、データが変更されたときに対応する操作を実行するために使用されます。 computed は、依存データに基づいて新しい値を動的に計算し、その値をキャッシュするために使用されます。依存データが変更された場合にのみ再計算されます。

4.1.0. 依存性注入とは何ですか?その応用シナリオは?

依存関係の注入は、あるコンポーネントから別のコンポーネントに依存関係を渡すために使用される設計パターンです。 Vue では、依存関係の注入は、provide および inject オプションを通じて実装されます。親コンポーネントは Provide を通じてデータを提供し、子コンポーネントは Inject を通じてこのデータを注入します。複数のレベルにわたるコンポーネントの通信に非常に役立ちます

4.1.1. アクションと突然変異の違いは何ですか?

ミューテーションの操作は、状態の変数の状態を変更するために使用される一連の同期関数です。 vuexを利用する場合、操作が必要なコンテンツをcommitで送信する必要があります。ミューテーションはイベントと非常に似ています。各ミューテーションには文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。このコールバック関数は実際の状態変更が行われる場所であり、最初のパラメーターとして状態を受け取ります。

const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 1
  },
  mutations: {
    
    
    increment (state) {
    
    
      state.count++      // 变更状态
    }
  }
})

4.1.2. ルーターとルートの違いは何ですか?

router は VueRouter のオブジェクトです。Vue.use(VueRouter) と VueRouter コンストラクタを通じて、router のインスタンス オブジェクトを取得します。このオブジェクトは、すべてのルートと多くのキー オブジェクトと属性を含むグローバル オブジェクトです。
ルートはジャンプ ルーティング オブジェクトです。各ルートにはローカル オブジェクトであるルート オブジェクトがあり、対応する名前、パス、パラメータ、クエリを取得できます。

4.1.3. スロットとは何ですか?名前付きスロットとスコープ付きスロットの例は?

<!-- 父组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot :data="data"></slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header">默认标题</slot>
    <slot :data="computedData">{
    
    {
    
     computedData }}</slot>
  </div>
</template>

4.1.4. アニメーション システムはどのように機能しますか?簡単な例でしょうか？

Vue.js のアニメーション システムは、CSS トランジションとアニメーション クラスを通じて実装されます。要素にトランジション クラスまたはアニメーション クラスを追加すると、対応するトランジション効果またはアニメーション効果をトリガーできます。例：

<transition name="fade">
  <div v-if="show">显示内容</div>
</transition>

<!-- CSS样式 -->
<style>
.fade-enter-active, .fade-leave-active {
    
    
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
    
    
  opacity: 0;
}
</style>

4.1.5. エラー処理メカニズム?どうやって捕獲するの？

Vue.js は、グローバル エラー処理メカニズムとコンポーネント レベルのエラー処理メカニズムを提供します。グローバル エラー処理は、errorCaptured フック関数を通じてエラーをキャプチャして処理できます。コンポーネントレベルのエラー処理では、errorCaptured フック関数または errorHandler オプションを通じてエラーをキャプチャして処理できます。

4.1.6. リアクティブアレイの制限は何ですか?の解き方？

Vue.js の応答システムは、配列の変更メソッド (プッシュ、ポップ、スプライスなど) を追跡できません。この制限を解決するために、Vue は、Vue.set、vm.$set、Array.prototype.splice などの特別なメソッドをいくつか提供しています。これらのメソッドは、配列を更新し、応答性を維持するために使用できます。

4.1.7. コンポジション API とオプション API の違いは何ですか?

Comboposition API は、Vue.js 3 で導入されたコンポーネント ロジックを編成する新しい方法です。これにより、開発者はオプション オブジェクトではなく関数を通じてロジックを整理し、再利用できるようになります。対照的に、オプション API は、Vue.js 2 でコンポーネント ロジックを編成するために一般的に使用される方法です。コンポーネントのデータとメソッドは、オプション オブジェクトのプロパティを通じて定義されます。

4.1.8. サスペンスとは何ですか?それは何をするためのものか？

Suspense は、非同期コンポーネントの読み込み状態を処理するために Vue.js 3 で導入されたメカニズムです。非同期コンポーネントがロードされる前にプレースホルダーを表示し、ロードされた後に非同期コンポーネントのコンテンツをレンダリングできます。これにより、非同期コンポーネントの読み込みプロセスがより適切に処理され、より良いユーザー エクスペリエンスが提供されます。

4.1.9. Provide と Inject の機能は何ですか?例を挙げてください。

Provide と Inject は、コンポーネント間の依存関係の注入を実装するために使用されます。親コンポーネントで Provide を使用してデータを提供し、inject を使用してこのデータを子コンポーネントに注入します。例：

// 父组件
const Parent = {
    
    
  provide: {
    
    
    message: 'Hello Spider！'
  },
  // ...
}

// 子组件
const Child = {
    
    
  inject: ['message'],
  created() {
    
    
    console.log(this.message); // 输出：Hello Spider!
  },
  // ...
}

4.2.0. watchEffect と watch の違いは何ですか?使い方？

watchEffect は、応答データの変更を監視し、コールバック関数で対応する操作を実行するために使用されます。依存関係を自動的に追跡し、依存関係が変更された場合にはコールバック関数を再実行します。 Watch は、指定された応答データを監視し、変化したときに対応する操作を実行するために使用されます。これにより、リッスンするデータを正確に指定でき、より多くの構成オプションが提供されます。一般に、応答データの変更を監視し、対応する操作を実行する必要がある場合のみ、watchEffect を使用できます。より詳細な制御が必要な場合は、watch を使用できます。

5. React関連のまとめ

5.0.1. 中心となる概念は何ですか?

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。その中心となる概念は、コンポーネント化と宣言型プログラミングです。 React は、ユーザー インターフェイスを独立した再利用可能なコンポーネントに分割し、宣言構文を使用してコンポーネントの状態と UI 間の関係を記述するため、複雑な UI の構築が簡単かつ保守可能になります。

5.0.2. ライフサイクルメソッド?いくつか挙げてみてはいかがでしょうか？

React ライフサイクル メソッドは、コンポーネントのさまざまな段階で実行される特定のメソッドです。一般的に使用される React ライフサイクル メソッドをいくつか示します。

**
componentDidMount: コンポーネントがマウントされた直後に呼び出される
componentDidUpdate: コンポーネントが更新された後に呼び出される
componentWillUnmount: コンポーネントがアンロードされる前に呼び出されます
shouldComponentUpdate: コンポーネントを再レンダリングする必要があるかどうかを決定します
getDerivedStateFromProps: props の変更に従って状態を更新します* *

5.0.3. コンテキストに反応しますか?効果？

React Context は、コンポーネント ツリー内でデータを共有するためのメカニズムです。これにより、プロップを介してレイヤーごとにデータを渡すことが回避され、コンポーネント間でのデータ共有がよりシンプルかつ効率的になります。 React Context は、共有データを提供および消費するためのプロバイダー コンポーネントとコンシューマー コンポーネントを提供します。

5.0.4. ルーターに反応しますか?効果？

React Router は、ルーティングを処理するための React のライブラリです。これは、単一ページ アプリケーションにナビゲーションおよびルーティング機能を実装する方法を提供します。 React Router は、開発者がページ間の切り替え、URL パラメーターの受け渡し、ネストされたルーティングなどの機能を実装するのに役立ちます。

5.0.5. フックに反応する?効果？

React Hooks は、機能コンポーネントで状態およびその他の React 機能を使用するために React バージョン 16.8 で導入された機能です。フックは、クラス コンポーネントを作成せずに状態を管理し、副作用を処理する方法を提供し、関数コンポーネントにクラス コンポーネントの機能を持たせます。

  さて、また皆さんとお別れの時間です。作成は簡単ではありません。親指を立てて去ってください。皆様のご支援が創作の原動力となっており、より質の高い記事をお届けできればと思っております。