React.js 思考
React 社群提供了一個關於如何以 React 方式思考並構建大型、快速且可擴充套件應用程式的方向。React 已覆蓋多個平臺,並廣泛用作流行的 JavaScript UI 介面庫。
步驟 1 - 建立一個簡單的模擬服務
如果我們需要進行伺服器呼叫並獲取資料,我們可以從建立一個模擬服務開始,並構建一個元件來獲取和顯示資料。
在這裡,我們可以包含元件中 JSON 的處理以及預期結果的評估。
步驟 2 - 將功能分解成更小的元件
React 最先建議的是建立更小、更容易理解的盒子設計。這些盒子將表示不同元件之間的關聯以及資料流的傳遞。
元件的建立應基於單一職責原則。這意味著單個元件應處理單個任務。
建立元件層次結構將使開發人員的任務更容易。
步驟 3 - 如果可能,從建立簡單的靜態版本開始
透過使用模擬服務和更小的元件,我們可以建立一個靜態版本並在其上構建應用程式。
建立靜態版本不應使用狀態修改。它應該只處理 props 的傳遞和 UI 的渲染。保持 React 中單向資料流使其簡單且模組化。
為了更清楚地說明 props 和 state 的區別和用例,應該很好地理解它們。
步驟 4 - 識別 UI 狀態的最小表示
為了使應用程式具有互動性,狀態應該能夠從相關元件觸發。
識別所需的易變狀態對於構建正確的應用程式是必要的。
步驟 5 - 確定狀態應該位於哪裡 -
狀態可以在多個子元件之間共享。提升狀態可以用於實現多個元件之間的通訊。使用 Redux 等狀態管理庫可以解決許多由狀態引起的問題。
React 強烈建議將資料單向向下傳遞到元件。
步驟 6 - 根據需要新增雙向資料流 -
表單處理中的受控元件是雙向資料繫結的示例。
廣告