React.js 思考


React 社群提供了一個關於如何以 React 方式思考並構建大型、快速且可擴充套件應用程式的方向。React 已覆蓋多個平臺,並廣泛用作流行的 JavaScript UI 介面庫。

步驟 1 - 建立一個簡單的模擬服務

如果我們需要進行伺服器呼叫並獲取資料,我們可以從建立一個模擬服務開始,並構建一個元件來獲取和顯示資料。

在這裡,我們可以包含元件中 JSON 的處理以及預期結果的評估。

步驟 2 - 將功能分解成更小的元件

React 最先建議的是建立更小、更容易理解的盒子設計。這些盒子將表示不同元件之間的關聯以及資料流的傳遞。

元件的建立應基於單一職責原則。這意味著單個元件應處理單個任務。

建立元件層次結構將使開發人員的任務更容易。

步驟 3 - 如果可能,從建立簡單的靜態版本開始

透過使用模擬服務和更小的元件,我們可以建立一個靜態版本並在其上構建應用程式。

建立靜態版本不應使用狀態修改。它應該只處理 props 的傳遞和 UI 的渲染。保持 React 中單向資料流使其簡單且模組化。

為了更清楚地說明 props 和 state 的區別和用例,應該很好地理解它們。

步驟 4 - 識別 UI 狀態的最小表示

為了使應用程式具有互動性,狀態應該能夠從相關元件觸發。

識別所需的易變狀態對於構建正確的應用程式是必要的。

步驟 5 - 確定狀態應該位於哪裡 -

狀態可以在多個子元件之間共享。提升狀態可以用於實現多個元件之間的通訊。使用 Redux 等狀態管理庫可以解決許多由狀態引起的問題。

React 強烈建議將資料單向向下傳遞到元件。

步驟 6 - 根據需要新增雙向資料流 -

表單處理中的受控元件是雙向資料繫結的示例。

更新於:2019年8月28日

521 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告