学校採用フロントエンド面接のよくある質問[5] - フロントエンドフレームワークと共通ツール

前に書かれている：

インタビューの質問はすべて整理され、GitHub で共有されています。スターへようこそ。
アドレス: https://github.com/shadowings-zy/front-end-school-recruitment-question

反応する

Q: 仮想 DOM の概念について簡単に説明してください。

React ベースで開発する場合、すべての DOM 構築は仮想 DOM を通じて実行され、データが変更されるたびに React は DOM ツリー全体を再構築し、現在の DOM ツリー全体と以前の DOM ツリーを比較して DOM 構造を取得します。を選択し、変更が必要な部分のみの実際のブラウザ DOM 更新を実行します。

React が DOM を構築するとき、JavaScript オブジェクトを使用して DOM をシミュレートするため、js オブジェクトを比較するオーバーヘッドはブラウザ DOM よりもはるかに小さくなります。

Q: React のライフサイクルについて簡単に説明してください。

ライフサイクルに反応する

Q: React Fiber のコンセプトを簡単に説明してください。

ページ要素が多く、頻繁に更新が必要なシナリオでは、React 15 でフレームドロップが発生します。では、なぜフレームドロップの問題が発生するのでしょうか? 根本的な原因は、多数の同期コンピューティングタスクがブラウザーの UI レンダリングをブロックしていることです。デフォルトでは、JS 操作、ページレイアウト、ページ描画はすべてブラウザーのメインスレッドで実行され、相互に排他的です。JS 操作がメインスレッドを占有し続けると、ページの更新が間に合わなくなります。setState を呼び出してページを更新すると、React はアプリケーションのすべてのノードを走査し、差分を計算して、UI を更新します。ページ上に多くの要素がある場合、プロセス全体に 16 ミリ秒以上かかる可能性があり、フレームドロップが発生しやすくなります。その理由は、React 15 がコンポーネントツリー全体を再帰的に走査するためです。

React16 は、基礎となる更新ユニットのデータ構造をリンクリスト構造に変更しました。以前の調整アルゴリズムは再帰呼び出しであり、react dom のツリーレベルの関係によって形成されたスタックを通じて再帰的に実行されます。Fiber はフラットリンクリストのデータストレージ構造です。Child は最初の子ノードの検索に使用され、return は親ノードの検索に使用され、sibling は兄弟ノードの検索に使用されます。トラバーサルが再帰からループに変更されました。

これは React のコアアルゴリズムのメジャーアップデートであり、React の調整アルゴリズムを書き換えます。調整アルゴリズムは、DOM ツリーの更新とレンダリングに使用されるアルゴリズムです。React 15.x の以前のバージョンでは、「スタック調整」と呼ばれるアルゴリズムが使用されていましたが、現在は「ファイバー調整」と呼ばれています。

ファイバーリコンサイラーの主な特徴は、更新プロセスを小さな単位に分割して更新できること、優先度の高いタスクやブラウザアニメーションのレンダリングなどを実行するために中断し、メインスレッドがアイドル状態のときに続行して更新を実行できることです。。

流暢性の問題については、requestldleCallback という API を簡単に考えることができます。この API は、ブラウザがアイドル状態のときにコールバックを実行できます。複雑なタスクをいくつかに分割し、ブラウザがアイドル状態のときに実行しても、レンダリングには影響しません。ブラウザなどで動作します。これにより、複雑なタスクがメインスレッドを長時間占有することによって引き起こされるレンダリングの遅延を解決できます。

しかし、おそらく互換性を考慮して、React チームはこの API を放棄し、requestAnimationFrame と MessageChannel polyfill を使用して requestIdleCallback を作成しました。

現在のフレームは最初にブラウザのレンダリングなどのタスクを実行し、現在のフレームにまだ空き時間があれば、現在のフレームの時間がなくなるまでタスクを実行します。現在のフレームに空き時間がない場合は、次のフレームの空き時間まで待機して実行されます。

Q: React の setState はいつですか?

setState を使用すると、データは直接更新されず、更新キュー内で直接ハングされます。
更新のタイミングは、現在のマクロタスク終了後、マイクロタスク開始前です。

this.state = {
    
    
  a: 1,
}

// 这种情况只会+1，因为它相当于Object.assign(oldState, {count: XXX}, {count: XXX})
this.setState({
    
     count: this.state.count + 1 })
this.setState({
    
     count: this.state.count + 1 })

console.log(this.state.count) // 这时候会取到原来的state，也就是1

// 进行改造，这样就一定会+2了
this.setState((state, props) => {
    
    
  return {
    
     count: state.count + 1 }
})
this.setState((state, props) => {
    
    
  return {
    
     count: state.count + 1 }
})

ヴュー

Q: mvvm パターンとは何ですか?

M: モデル => データ、ビジネスロジック、検証ロジック、およびモデルにはビジネスロジックが含まれることがよくあります。
V: ビュー => インタラクティブインターフェイス。これはモデルデータの視覚的なプレゼンテーションであり、ビューには表示ロジックが含まれる場合があります。
VM: ビューとモデルの間の仲介者。

データの双方向バインディング: V の変更は VM に直接反映され、M の変更も VM に直接反映されます。

Q: vue レスポンシブデータの原理を簡単に説明してください。

レスポンシブデータの鍵は、データがビューを更新する方法、およびビューがデータを更新する方法です。

1. 更新データの表示は、入力タグ監視「入力」イベントなどのイベントを通じて監視できます。

2. データ更新ビューのポイントは、データが変更されたことをどのように知るかです。このとき、Object.defineProperty()プロパティにset関数を設定しており、データ変更時にこの関数がトリガーされるため、ここに更新が必要なメソッドをいくつか置くだけでデータ更新ビューを実現できます。

Object.defineProperty の具体的な使用法:

Object.defineProperty(obj, prop, descriptor)
obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符。

descriptor 具有以下两种可选值：
get：给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入 this 对象。
set：给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

レスポンシブデータの簡単な例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>defineProperty</title>
  </head>
  <body>
    <div id="app">
      <input type="text" id="txt" />
      <p id="show"></p>
    </div>

    <script>
      let obj = {
      
      }

      Object.defineProperty(obj, 'txt', {
      
      
        get: function () {
      
      
          return obj
        },
        set: function (newValue) {
      
      
          document.getElementById('txt').value = newValue
          document.getElementById('show').innerHTML = newValue
        },
      })
      document.addEventListener('keyup', function (e) {
      
      
        obj.txt = e.target.value
      })
    </script>
  </body>
</html>

Q: Vue のライフサイクルについて簡単に説明してください。

Vueのライフサイクル

Q: Vue ルーターの原理を簡単に説明してください。

Vue ルーターには、ハッシュモードとヒストリーモードという 2 つのモードがあり、次の 2 つの原則に対応しています。

ハッシュモード:

hash("#")符号的本来作用是加在 URL 指示网页中的位置，例如：
http://www.example.com/index.html#print

#本身以及它后面的字符称之为 hash 可通过 window.location.hash 属性读取。
hash 虽然出现在 url 中，但不会被包括在 http 请求中，对服务器端完全无用，因此，改变 hash 不会重新加载页面。

我们可以为 hash 的改变添加监听事件：
window.addEventListener("hashchange",funcRef,false)

每一次改变 hash，我们都会重新注入对应的组件，就可以来实现前端路由"更新视图但不重新请求页面"的功能了。

履歴モード:

从HTML5开始，History interface提供了2个新的方法：pushState(),replaceState()使得我们可以对浏览器历史记录栈进行修改。

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

stateObject: 当浏览器跳转到新状态时，触发popState事件，该事件将携带stateObject参数的副本
title: 所添加记录的标题
URL: 所添加记录的URL

我们可以为window.history的改变添加监听事件：
window.addEventListener("popstate",funcRef,false)

在监听事件中，重新注入对应的组件，就可以来实现前端路由"更新视图但不重新请求页面"的功能了。

用 HTML5 实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求，可能会造成404。

梱包ツール

Q: Webpack について教えてください。

webpack はモジュールパッケージ化ツールです。webpack ではすべてのファイルがモジュールであり、webpack でできることはそれらをまとめてパッケージ化することです。

Webpack には、構成中に主に次の共通属性があります。

1. エントリと出力:
エントリポイントは、Webpack が内部依存関係グラフの構築の開始としてどのモジュールを使用する必要があるかを示します。エントリポイントを入力すると、webpack はそのエントリポイントが (直接的および間接的に) どのモジュールとライブラリに依存しているかを調べます。

Output 属性は、Webpack に、作成するバンドルを出力する場所と、これらのファイルに名前を付ける方法を指示します。デフォルト値は ./dist です。基本的に、アプリケーション構造全体は、指定した出力パスのフォルダーにコンパイルされます。これらのプロセスを構成するには、構成で出力フィールドを指定します。

const path = require('path')
module.exports = {
    
    
  entry: './path/to/my/entry/file.js',
  output: {
    
    
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
}

2. ローダー:
ローダーを使用すると、Webpack が非 JavaScript ファイルを処理できるようになります。ローダーは、あらゆる種類のファイルを webpack が処理できる有効なモジュールに変換し、webpack のパッケージ化機能を使用してそれらを処理できます。
基本的に、Webpack ローダーは、あらゆる種類のファイルを、アプリケーションの依存関係グラフ (最終的にはバンドル) が直接参照できるモジュールに変換します。

const path = require('path')
const config = {
    
    
  module: {
    
    
    rules: [{
    
     test: /\.txt$/, use: 'raw-loader' }],
  },
}

3. プラグイン:
ローダーと比較して、プラグインは圧縮やパッケージ化、最適化などの幅広いタスクを実行するために使用できます。プラグインを使用するには、プラグインを require() して plugins 配列に追加するだけです。

const HtmlWebpackPlugin = require('html-webpack-plugin') // 通过 npm 安装
const webpack = require('webpack') // 用于访问内置插件
const config = {
    
    
  module: {
    
    
    rules: [{
    
     test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({
    
     template: './src/index.html' })],
}