React 的思考模式

寫 React 時的思考模式與過往寫 HTML + JavaScript 的思考模式，個人認為最不一樣的兩點是：

• 以元件（Component）為基本元素建構網頁
• 由 state 來決定網頁的畫面

#以元件（Component）為基本元素建構網頁

在 React 中，網頁是由大大小小的 Component 所組合而成。而這些 Component 的該如何切分，才能達到更好的重用性便是重點。

對於初學 React 的新手來說，這與過去先將 HTML 寫好，再透過 JavaScript 改變 HTML 元素的方式很不一樣。在寫 Component 的同時就會需要考慮到這個 Component 會透過哪些 State 改變，需要傳什麼 props 給下一層等等問題。

#由 state 來決定網頁的畫面

React 中很重要的一點是資料與畫面的一致。只要透過改變 state，畫面就可以跟著改變。

我認為這是寫 React 時很方便的一點，只要事先將 Component 寫好，state 一改變，畫面就可以跟著改變，不需要額外的程式控制畫面。

#火鍋跟烤肉

如果要比喻的話，傳統的 HTML + JavaScript 就像是火鍋，而 React 則是烤肉？？？（什麼意思）

HTML 就像湯底，只能看沒得吃，要把食材（JavaScript）倒入才算是功能齊全、可以享用的美食。

React 則像是烤肉，每一種食材（Component）都可以直接吃，有著各自的風味（功能），不過要把這些烤好的食材通通端出來才算是像樣的烤肉啊！

比喻的不是很好，不過好餓喔...