React 理念
第一步：把 UI 劃分出組件層級
例如 單一功能原則，在理想狀況下，一個組件應該只做一件事情。如果這個組件功能不斷豐富，它應該被分成更小的組件。
第二步：用 React 創建一個靜態版本
最簡單的方式是先創建一個靜態版本：傳入數據模型，渲染 UI 但沒有任何交互。最好把這些過程解耦，因爲創建一個靜態版本更多需要的是碼代碼，不太需要邏輯思考，而添加交互則更多需要的是邏輯思考，不是碼代碼。
要構建一個用於呈現數據模型的靜態版本的應用程序，你需要創建能夠複用其他組件的組件，並通過 props 來傳遞數據。props 是一種從父級向子級傳遞數據的方法。如果你熟悉 state 的概念， 在創建靜態版本的時候不要使用 state。State 只在交互的時候使用，即隨時間變化的數據。由於這是靜態版本的應用，你不需要使用它。
第三步：定義 UI 狀態的最小(但完整)表示
爲了正確構建你的應用，首先你需要考慮你的應用所需要的最小可變狀態集。要點是 DRY：不要重複(Don’t Repeat Yourself)。找出應用程序的絕對最小表示並計算你所需要的其他任何請求。例如，如果你正在創建一個 TODO 列表，只要保存一個包含 TODO 事項的數組；不要爲計數保留一個單獨的狀態變量。相反，當你想要渲染 TODO 計數時，只需要使用 TODO 數組的長度就可以了。
讓我們來看看每一條，找出哪一個是 state。每個數據只要考慮三個問題：
- 它是通過 props 從父級傳來的嗎？如果是，他可能不是 state。
- 它隨着時間推移不變嗎？如果是，它可能不是 state。
- 你能夠根據組件中任何其他的 state 或 props 把它計算出來嗎？如果是，它不是 state