React 基礎二：目錄結構、命名、建立 react apps 步驟
阿新 • • 發佈：2019-02-03
這些內容是我學習 《fullstack-react-book》 一書，自己翻譯整理出來的要點。
目錄結構
當你瀏覽一個網站， assets 目錄存放的是你瀏覽器下載的，並且用來展示頁面的檔案。
瀏覽器在解析 index.html 檔案的時候，該檔案其內部的
<head>標籤內的程式碼具體說明了需要瀏覽器從伺服器下載哪些額外的檔案。
命名元件
- 如何命名元件完全取決於你的喜好。但是，命名時圍繞著語義，保持一些一致的規則，將會極大地提高程式碼的可讀性。
建立 React apps 的步驟
事實上，每一個 react 應用都可以按照以下步驟來開發：
將 app
解構成元件：- 當拿到一個 app 設計稿時，我們基本上能從視覺上將 app 分成幾個 react 元件。
- 最小職責原則：在理想的情況下，每個元件應該各自負責一塊功能。這種職責界定法，不僅能讓每個元件非常簡單明瞭，還改善了可複用性。
建立一個靜態的 app 頁面：
- 在 react 中給表單元素設定預設值，用的是
defaultValue屬性。 - 那些最底層的元件，也就是我們通常所說的“葉根元件”，它們擔負起了頁面上的大部分 HTML 結構。這是些最根本的元件。所有基於“葉根元件”的元件都應該是被精心設計過的。
- 在 react 中給表單元素設定預設值，用的是
分別哪些變數應該是狀態化的：
- 如果一個屬性是通過 props 從父級元件那兒傳遞值過來的，那它一般不應該狀態化。
- 如果一個屬性會隨著時間而改變，那他基本上是需要狀態化的資料！這是評判一個屬性是否為狀態化資料的一條關鍵標準。
- 如果一個屬效能夠通過其他 props 或 state 計算得出，那它肯定不是 state 。為了簡單考慮，我們儘可能描述最少的 state 值。
- 如果一個屬性是通過 props 從父級元件那兒傳遞值過來的，那它一般不應該狀態化
考察每個 state 變數應該放在哪個元件中：
- 對於每一個 state 值，我們都應該從以下幾個方面來考量它屬於哪個元件：
- 確認每個元件在渲染一些結構的時候是基於這個 state 值的。
- 找到所有需要這個 state 值的元件，並且在 DOM 樹找到這些元件的公共父級。
- 無論是公共父級，還是在 DOM 樹中更高級別的父級，都應該擁有這個state值。
- 如果，在 DOM 樹中你找不到公共父級去擁有這個 state 值，那就請建立一個囊括了所有需要這個 state 值的新元件，這個新元件擁有這個 state 值。
- 對於每一個 state 值，我們都應該從以下幾個方面來考量它屬於哪個元件：
硬編碼初始的 state 值
- 對於 react 中的 id 值，我們使用已經在 index.html 中載入的 UUID 這個庫。我們使用
uuid.v4()為每一個專案隨機生成一個通用的獨一無二的識別碼 （Universally Unique IDentifier） 。 - 使用 id 屬性來判斷一個物件是否已經建立是一種通用的做法。
- 單向資料管道 （one-way data pipeline）：如果 state 值更新了，元件通過呼叫
render()方法讓相應的 state 值重新渲染。這會相應地觸發它的子元件及孫子級元件等等後輩元件重新渲染。
- 對於 react 中的 id 值，我們使用已經在 index.html 中載入的 UUID 這個庫。我們使用
增加相反的資料流
增加頁面與伺服器的互動