finished week21

Author: chengcheng1231

homeworks/week21/hw1/my-app

@@ -0,0 +1 @@
+Subproject commit 4562bbc11389f277bfe7583ba71e326508ee8657

homeworks/week21/hw2/my-app

@@ -0,0 +1 @@
+Subproject commit 457c6d0e4e3ace81324a483763d1ca44db7f8c5d

homeworks/week21/hw3/my-app

@@ -0,0 +1 @@
+Subproject commit 99048e7d3ec9295d0fd0537b5b1ae8b695e10e9f

homeworks/week21/hw4.md

@@ -1,7 +1,41 @@
 ## 為什麼我們需要 React？可以不用嗎？
 
+這個問題可以先探討為什麼我們需要用到框架，現代三大前端框架 Vue、React 和 Angular 的各有優缺點，所以做為一個 React 初學者而言可以先專注在 React 有什麼特點，我們為什麼需要利用這個特點開發。因為對於 PM 或是開發人員有其外在環境因素（預算、時間、應用大小、終端使用者、專案目標、以及可用資源）的限制，也就是遇到什麼問題就用什麼方式解決，而非殺雞焉用牛刀，必須考慮到適切性的問題。
+
+React 的特點：
+1. 「元件式」（component） 的開發架構。可以想像成在拼樂高的時候，我們會需要先拚出一個個比較小的元件，再把這些元件拼湊成一個大的元件，最後成為一個完整的專案，這樣方式在網站上可以將相同功能的區塊分割成一個一個的元件，再依照頁面需求組合起來，一方面可以重複利用這些元件，另一方面修改一個元件就可以去改遍所有元件要顯示的內容。
+
+2. 「虛擬 DOM」（Virtual DOM）：我們不用自行去操作 DOM，React 會去操作：因為 React 採用的是 Declarative programming，宣告這個元件的用處是什麼，所以我們只要告訴 React 我們 App 的資料狀態（state、props）和頁面會是長什麼樣子，它則會根據資料狀態（state、props）的變化，React 會以最有效率的方式操作 DOM，也就是 Virtual DOM 的應用。
+
+
+3. 資料與畫面分離：之前的我們利用 JQuery 能輕鬆的跨瀏覽器去操作 DOM（Document Object Model）等功能，或是利用 PHP 來設定各個 DOM 的資料、邏輯以及畫面，但隨著前端的規模越來越大，事件、邏輯、資料變化以及畫面的渲染都變得難以掌握，因此後續維護也變得更加困難，然而 React 其實如同寫 Express & Sequelize 時所採用的 MVC 的概念能將資料、邏輯與畫面分離，讓他們不會整個綁在一起，因此能讓資料流比較複雜的專案在開發和後續維護上有更清楚的劃分。
+
+
+有時候我們不一定要使用 React，因為某些專案若用純 JavaScript 或是 jQuery 處理還會比較簡單，甚至效能還比較好，畢竟與「直接操作 DOM 元素」相比，React 要經過渲染、渲染過程中要比對 DOM 與虛擬 DOM，「相對」還是比較沒有效率的，
+
 ## React 的思考模式跟以前的思考模式有什麼不一樣？
+1. 一切都以資料狀態出發，並且以單向（Unidirectional Data Flow）的方式作為整個渲染頁面的主軸，像是透過資料狀態（state、props）創造元件進而渲染頁面（view），另外，當使用者做了某個動作而去改變資料狀態（action），通常也是透過 `setState` 來改變資料狀態，則元件則會再次根據資料狀態來做渲染而產生頁面。這個與之前用 jQuery 來實作有一些差異，之前用 jQuery 可以將處理 UI 和處理資料做分離，但如果某個功能被觸發時和這兩部份所呈現的資料不一致時就會產生問題，因此 React 以單向從資料狀態出發的概念則是要確保資料和渲染 UI 上的資料保持一致。
 
+2. 以資料狀態出發來重新渲染整個畫面對於瀏覽器的負擔是很重的，因此 React 採用 VirtualDOM 的實作和概念來解決這方面的問題，React 會拿新舊 VirtualDOM 進行比對，並只針對差異之處到實體的 DOM 中進行更新，可以大大提升效能。
 
 ## state 跟 props 的差別在哪裡？
 
+雖然他們兩者都代表資料來源，也都是當 props 或 state 有變化時，就會自動去渲染，但他們有什麼不同？
+
+1. 可以把 props 想像傳遞資料的一個媒介，它也是 JavaScript 的物件 Object，上層的元件可以透過 props 傳遞資料給下層元件，當下層元件接收到資料則會做出相對應的變化，所以上層元件可以自定義屬性到 props 裡面（例如 name="Cheng"），下層用 props.name 拿到 Cheng 進而去處理這個元件，因此下層需定義要如何處理這個透過 props 傳遞的資料。
+
+2. state 則是由元件內來進行做定義，由元件內部進行初始化、控制其事件觸發後變化的資料邏輯，然後保存。它也可能因為上層元件遞進來的 props 而改變，也可能是元件自身設定的邏輯而改變，當 state 變動同樣也會引起元件變化。
+
+以五子棋的例子來說，你只希望有黑白兩種顏色的棋子，所以可以用 props 來做處理，並傳給下層元件，下層元件則根據傳進來的資料來判斷黑白兩種棋子畫面上應該如何呈現，你並不會接收到有藍色會綠色的棋子出現，因此由開發者透過 props 來設定這個元件的變化有多大的彈性。
+state 適合來做互動性高、會隨時改變的資料，例如：我們不會知道使用者會下哪步棋，或者我們不會知道下這部棋之後是否這場比賽就結束了，因此用 state 來存取。
+
+
+參考資料：
+
+[网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？](https://www.zhihu.com/question/31809713)
+
+ [React Virtual DOM Explained in Simple English](https://programmingwithmosh.com/react/react-virtual-dom-explained/)
+
+[一份全面的React、Angular和Vue.js比較指南](https://www.itread01.com/content/1544614773.html)
+
+[筆記 Why React?](https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/%E7%AD%86%E8%A8%98-why-react-424f2abaf9a2)

homeworks/week7/hw1/index.html

@@ -13,7 +13,7 @@
 		<div class="sheet__title">新拖延運動報名表單</div>
 		<p class="sheet__info">
 			活動日期：2020/12/10 ~ 2020/12/11 <br>
-			活動地點：台北市大安區新生南路二段1號
+			活動地點：台北市大安區新生南路二段 1 號
 		</p>
 		<div class="section">
 			<p class="mark">*必填</p>