Skip to content

Latest commit

 

History

History
112 lines (87 loc) · 7.5 KB

W21_hw4：簡答題.md

File metadata and controls

112 lines (87 loc) · 7.5 KB
Raw

hw4：簡答題

1. 為什麼我們需要 React？可以不用嗎？

答：

想知道為什麼我們會需要 React，就要從 React 誕生的緣由說起， 在 React 出現前，當時 Ajax 技術正好盛行， 也因此許多原本由『後端』處理的事情開始慢慢的轉移到『前端』做處理，即所謂的 『前後端分離』， 之後為了 『提升開發效率和應用程式的性能』，開始有了許多大型前端框架的出現(如：Angular 等等)， 這些框架的出現讓當時的工程師們越發的專注於 UI 上的操作(也就是越發頻繁地去操作 DOM)， 然而這樣的行為反而導致了 『應用程式的性能越來越差』。

而此時的 Facebook 正好開發了『新好友』, 『新消息』,『新動態』這三個新的按鈕功能， 但是這些新功能在推出後卻經常出現像是「明明有收到新消息，但是顯示新消息的圖標上的數字卻沒有正確更新」這類 Bug， 工程師們經過不斷的思考過後，他們總結出了兩個原因：

  1. 工程師太過關注 UI 層面的操作
  2. 應用程式的狀態太過分散，導致他們難以追縱和維護

他們認為原本的 MVC 架構已經無法滿足 Facebook 的擴展需求，再加上隨著應用程式的規模增加，系統的複雜度也跟著成倍數的增長， 更是加重了他們在開發以及後續維護上的困難。

因此 Facebook 便開源出了 React 這個 JS Library，負責 MVC 的 View(介面) 最主要的改變就在於，以前我們需要自己去操作 DOM 來改變畫面上顯示的資訊，轉變成由 React 來負責操作 DOM， 而我們需要做的則是關注『資料（即 state）』上的變化，也就是說『透過改變資料的狀態，來告訴 React 我們最終想要顯示的結果』， 讓 React 做到『根據資料狀態的改變，重新渲染畫面』，並且還引入了 Component(元件) 及 Virtual DOM 的概念， 使用 Component(元件) 的好處在於可以快速地重複使用已經寫好的元件，而且每個元件的狀態都是獨立的，不會互相影響， 而 Virtual DOM 則讓 React 可以透過 DOM Diff 的方式比較出 DOM Tree 上不一樣的地方，只去更改真正不同的部分， 大大降低了渲染時所需要的資源，也提高了應用程式的效能。

至於是否可以不用 React，答案當然是肯定的！ 從上述的 React 誕生的緣由，可知 React 的作用便是為了解決專案規模越大，系統複雜度越高的問題，降低工程師們在開發上的困難， 因此如果專案規模不大的話，當然可以選擇不去使用 React 這個 Library， 或者說在專案規模比較小的時候，直接使用單純的 HTML, CSS, JS 去開發其實反而會更加的簡便。

參考來源： [week 21] 初探 React：Component、JSX 語法、props 與 state 的不同 [筆記] Why React? - Medium React 与前端开发发展史 01-React 的诞生 - Github React 是怎样炼成的

2. React 的思考模式跟以前的思考模式有什麼不一樣？

答：

最大的不同，應該就在於 React 多了 Component 和 State 的概念

Component（元件）

React 非常注重畫面上各種 element 的可重複利用性，也就是將 UI 上的各種 element 元件化與模組化 以往我們都是用 HTML 裡原本就存在的各種標籤去呈現 UI， 而透過 Component(元件) 我們就可以自己定義出各種不同的標籤，再傳入 props 來設定各種屬性或資料， 讓我們可以將 UI 拆分成各種獨立且可複用的程式碼(也就是一個個元件)，非常強調 Component(元件) 的共用性及擴展性， 雖然 Component 是 React 裡的最小單位，但是要怎麼將一個完整的畫面拆分成各個不同的 Component，在大小或方式上並沒有一定的規範， 可以一個畫面只拆分成三個大的 Component，也可以拆分成三十個小的 Component， 甚至要在一個大的 Component 裡面再次拆分出更細的 Component 也是可以的， 而 Component 可以用 JS 的 function 或 class 的方式來實作出來，分別被稱為 function component 及 class component。

State（狀態）

和以往由我們自己直接操作 DOM 元素來改變畫面的方式不同， React 的概念是 『透過資料狀態的改變，由 React 來決定是否重新渲染畫面』 由我們負責改變 state 的狀態(也就是 Component 的資料狀態)， 再讓 React 藉由比對 Virtual DOM 的方式，來決定是否需要更新 UI 畫面， 而 Component 有兩種資料來源： 註：這些會導致畫面改變的資料，在習慣上會統稱為 state

  1. 外部傳進來的 props
  2. 內部的 state（用 useState 設定的資料）

因此只要 React 偵測到 props 或 state 有改變的話，就會自動執行 re-render 的動作。

參考來源： [week 21] 初探 React：Component、JSX 語法、props 與 state 的不同


3. state 跟 props 的差別在哪裡？

答：

首先 state 和 props 本身都是純 JS object，且兩者只要有任一個改變時，都會觸發 React 的 re-render， 兩者的特點分別是：

State（狀態）
  1. 是 Component 本身的狀態
  2. 在 Component 內部被管理，類似於 function 中的宣告變數
  3. state 一旦更新，Component 就會被重新 render
  4. 只有該 Component 內部能透過 setState 變更 state (註：可以在父層把 setState 當 props 傳下去，讓子層能更改到父層的 state)
  5. 由於 React 單向資料流的特性，state 只能影響到擁有此 state 的 Component 及此 tree 「以下」的 Component
  6. 沒有 state 的元件叫做無狀態元件(stateless component)，反之則稱為有狀態元件(stateful component) (註：因為狀態會帶來管理上的複雜性，所以 React 非常鼓勵多寫無狀態元件)
Props（屬性）
  1. 從外部傳進 Component，類似於 function 的參數
  2. 如果沒給傳下去的 props 傳值，則此 props 預設會是 true 值
  3. 傳下去的 Props 值如果有變動，子層的 Component 就會重新 render
  4. Props 具有『唯讀』的特性，該 Component 本身不可以直接對接收到的 props 做更改 (註：但是可以用另外宣告變數取出 props 的值，再來改變的方式，例如：解構取值)
  5. 由於 React 單向資料流的特性，Props 只能從父層由上往下傳遞給子層，無法由下往上傳遞

參考來源： [week 21] 初探 React：Component、JSX 語法、props 與 state 的不同 Components 與 Props - React 官方文件 State 和生命週期 - React 官方文件 React 的 props 與 state - iT 邦幫忙 DAY 04】React！說，Props 是誰啊？ - iT 邦幫忙 【DAY 05】React！說，State 又是誰啊？ - iT 邦幫忙 React 學習：狀態(State) 和屬性(Props) - IT 閱讀