你了解 React JS 嗎 15 個 React JS 的面試問題

me
林彥成
2021-05-07 | 4 min.
文章目錄
  1. 1. 什麼是 React.js?
  2. 2. 什麼是元件? 為什麼元件的概念對 React 來說很重要?
  3. 3. Props 和 State 差別在哪?
  4. 4. 選擇一個曾經在專案中用過的元件週期,並介紹你是怎麼使用的?
  5. 5. Class 跟 Functional 元件的差別? 該怎麼選擇?
  6. 6. 什麼是 React 中的 Events?
  7. 7. 什麼是 JSX?
  8. 8. 什麼是 Virtual DOMs? 又是怎麼運作的?
  9. 9. 你會怎麼 Debug 用 React 寫出來的網頁應用? 用哪些工具?
  10. 10. React 跟 React Native 差別在哪?
  11. 11. 用 React 的優點是什麼?
  12. 12. React 有什麼缺點和限制?
  13. 13. 什麼是 Redux?
  14. 14. 使用 Redux 的優點是什麼?
  15. 15. 為什麼你會想選擇 React?
  16. 16. 同場加映

因為最近想準備面試,所以在網路上看到國外這篇 15 個關於 React JS 的面試問題覺得蠻適合當作 React 入門的必備知識,底下是 15 個問題翻譯和回答:

什麼是 React.js?

  • React.js 是一套協助實作 Web 和 Mobile 使用者介面的前端函式庫 (library)
  • 是 Facebook 2011 年認為現有解決方案無法處理目前問題,決定開始研發的一套函式庫
  • 累積至今有大量開源社群的支持

什麼是元件? 為什麼元件的概念對 React 來說很重要?

React 是以元件為基礎的函式庫,元件像積木一樣組成網站的使用者介面。主要有兩個好處:

  • 把使用者介面拆解成可重複使用的部分
  • 透過 React 的優化,可以做到只更新畫面中部份的元件讓效能更好

Props 和 State 差別在哪?

之前剛好寫過關於元件狀態與性質的文章,不過簡單回答:

狀態(State): 元件裡的資料,但值可以透過元件內邏輯操作而改變
性質(Props): 用來設定元件初始化的相關資料,無法透過元件內邏輯去改變

選擇一個曾經在專案中用過的元件週期,並介紹你是怎麼使用的?

週期在元件中是以函式方式顯示,在特殊階段會被觸發執行,其中 componentDidMount 就是當元件出現在畫面後會被執行。

Class 跟 Functional 元件的差別? 該怎麼選擇?

React 提供了兩種元件實做方式,更詳細的比較歡迎參考 React Class-based vs Functional Component 從特性淺談兩種寫法之異同

  • Functional component: 是最簡單的寫法,比較適合用來實作邏輯單純顯示用的元件
  • Class components: 較複雜且可以控制較多的元件週期和狀態比對

什麼是 React 中的 Events?

事件其實可以看成反應 (reactions) 的意思,還記得函式庫命名就是 React 吧。透過使用者的動作像是點擊、鍵盤輸入等來觸發使用者介面的變化,React 其實主要就是協助我們處理這些事情。

React 中的事件在撰寫上有稍微的不一樣

  1. React event handlers 會用駝峰式的命名,HTML 上面的是全小寫
  2. 透過 JSX 綁定的是 event handler 而不像 HTML 上面是綁字串

什麼是 JSX?

JSX 是 React 的語法糖,讓開發者能夠在元件中寫類似 HTML 的語法,能夠提升可閱讀性,所以如果不嫌麻煩也可以選擇不使用,雖然類似但命名和寫法還是略有差異,但透過編輯器外掛協助下其實算容易適應,像是 JSX 就需要把 class 寫成 className

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Demo() {
return (
<div>
<h1>Hello world!</h1>
</div>
);
}

function Demo() {
return React.createElement(
"div",
null,
React.createElement("h1", null, "Hello world!")
);
}

什麼是 Virtual DOMs? 又是怎麼運作的?

瀏覽器載入網頁的過程會把 HTML 的內容轉成資料結構存放在執行環境中,那個結構我們叫做 Document Object Model (DOM)。

如果不使用 React 又想更新網頁上的畫面,就是直接更新 DOM 裡面的值產生畫面改變。由於在結構中去尋找並更新值屬於複雜的行為,所以 React 在特定的假設下透過多實作一層 DOM 的影分身 Virtual DOM 來加速網頁的效能。

Virtual DOM 這個影分身會被存在記憶體中,並透過一個算法來和真實的 DOM 保持同步,透過算法比對到更新 DOM 的整個過程就叫做 reconciliation,其中 Fiber 則是 React v16 中新的 reconciliation 算法。

Virtual DOM 為什麼可以這麼快? 其實 React 只是策略上改進並沒有做什麼新的花樣,透過演算法操作在記憶體中的 DOM,接著 batch 一小段時間的變化才去改變真實的 DOM,盡可能減少 re-flow 跟 re-paint 的發生而已。

你會怎麼 Debug 用 React 寫出來的網頁應用? 用哪些工具?

  • Linters (eslint, jslint)
  • Debuggers (React Developer Tools)

React 跟 React Native 差別在哪?

  • React.js 是一套協助實作 Web 和 Mobile 使用者介面的前端函式庫 (library)
  • React Native 是一套以 React 概念為基礎用來開發原生 Android 或 iOS APP 用的框架

用 React 的優點是什麼?

  • 可能會提升網站效能和使用者體驗
  • 元件可重複使用提升開發效率
  • React 生態系提供外掛工具提升專案除錯效率

React 有什麼缺點和限制?

前陣子剛好在網路上看到一篇國外文章分享,所以小編就翻譯了一篇不在大型專案導入 React.js 的 5 個原因: 關於跟著 React.js 一路成長的心得分享,簡單來說:

  • 不是完整框架只是一套 UI 函式庫所以要裝很多外部套件才能成為完整的應用
  • 要整合到傳統的 MVC 架構需要比較複雜的額外配置
  • 學習上有一定的難度,像是元件概念和 JSX 都要花時間熟悉
  • 缺乏規劃會寫出很多 boilerplate

什麼是 Redux?

Redux 是一套除了 React 外也可以在其他 UI 的函式庫中使用的資料流管理工具,定義了資料流的規範補足了 React 在元件變多後狀態難以控管的問題,讓開發者能統一管理元件的狀態,讓程式更容易去維護和測試。

使用 Redux 的優點是什麼?

定義了一套公版資料流與程式架構,提高開發方式的可預期性、可維護性,透過 Redux 的開發者外掛開發也能夠更方便。

為什麼你會想選擇 React?

  • Virtual DOM 在某些情境下優化了效能
  • JavaScript 的開發者能在同個檔案完成所有開發動作
  • 元件能重覆利用,加速了開發速度
  • 提供 JSX 支援增加程式碼易讀性,但有沒有更好寫就見仁見智
  • 同樣的程式碼可以在 client 端和 Sever 端渲染出一樣的結果
  • Jest 讓單元測試更簡單

同場加映

在面試的整個流程中,其實有許多事情是可以多加強的,底下也列出幾篇文章,分享這幾年面試下來的心得給大家:


喜歡這篇文章,請幫忙拍拍手喔 🤣


share