兩年React老兵的總結 - 如何組織React項目

hoohack 發布于2019-08-23 18:40 / 3313人閱讀

摘要：一個復雜的應用都是由簡單的應用發展而來的隨著越來越多的功能加入項目代碼就會變得越來越難以控制本文章主要探討在大型項目中如何對組件進行組織讓項目具備可維護性系列目錄類型檢查組件的組織樣式的管理組件的思維狀態管理目錄組件設計的基本原則基本原則高

一個復雜的應用都是由簡單的應用發展而來的, 隨著越來越多的功能加入項目, 代碼就會變得越來越難以控制. 本文章主要探討在大型項目中如何對組件進行組織, 讓項目具備可維護性.

系列目錄

01 類型檢查

02 組件的組織

[03 樣式的管理]()

[04 組件的思維]()

[05 狀態管理]()

1. 組件設計的基本原則

基本原則

高質量組件的特征

2. 基本技巧

3. 組件的分類

1?? 容器組件和展示組件分離

2?? 分離邏輯和視圖

3?? 有狀態組件和無狀態組件

4?? 純組件和非純組件

5?? 按照 UI 劃分為布局組件和內容組件

6?? 接口一致的數據錄入組件

4. 目錄劃分

1?? 基本目錄結構

2?? 多頁應用的目錄劃分

3?? 多頁應用的目錄劃分: monorepo 模式

4?? 跨平臺應用

5?? 跨平臺的另外一種方式: taro

5. 模塊

1?? 創建嚴格的模塊邊界

2?? Named export vs default export

3?? 避免循環依賴

4?? 相對路徑不要超過兩級

6. 拆分

1?? 拆分 render 方法

2?? 拆分為組件

7. 組件劃分示例

1?? 劃分頁面

2?? 劃分基礎 UI 組件

3?? 設計組件的狀態

8. 文檔

擴展

1. 組件設計的基本原則 基本原則

單一職責(Single Responsibility Principle). 這原本來源于面向對象編程, 規范定義是"一個類應該只有一個發生變化的原因", 白話說"一個類只負責一件事情". 不管是什么編程范式, 只要是模塊化的程序設計都適用單一職責原則. 在 React 中, 組件就是模塊.

單一職責要求將組件限制在一個"合適"的粒度. 這個粒度是比較主觀的概念, 換句話說"單一"是一個相對的概念. 我個人覺得單一職責并不是追求職責粒度的"最小"化, 粒度最小化是一個極端, 可能會導致大量模塊, 模塊離散化也會讓項目變得難以管理. 單一職責要求的是一個適合被復用的粒度.

往往一開始我們設計的組件都可能復合多個職責, 后來出現了代碼重復或者模塊邊界被打破(比如一個模塊依賴另一個模塊的"細節"), 我們才會惰性將可復用的代碼抽離. 隨著越來越多的重構和迭代, 模塊職責可能會越來越趨于"單一"(

GPU云服務器云服務器怎么部署react項目 react如何部署到云服務器上 react _React

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105652.html

兩年React老兵的總結 - 類型檢查篇

摘要：系列引言最近準備培訓新人為了方便新人較快入手開發并編寫高質量的組件代碼我根據自己的實踐經驗對組件設計的相關實踐和規范整理了一些文檔將部分章節分享了出來由于經驗有限文章可能會有某些錯誤希望大家指出互相交流由于篇幅太長所以拆分為幾篇文章主要有以系列引言最近準備培訓新人, 為了方便新人較快入手 React 開發并編寫高質量的組件代碼, 我根據自己的實踐經驗對React 組件設計的相關實踐...

scola666 2019-08-23 18:38 評論0 收藏0
前端周刊第62期：學習學習再學習

摘要：騰訊前端技術大會和全球技術領導力峰會都于上周閉幕，我翻看了下講稿，有價值的參考還是不少。騰訊前端大會下載騰訊前端大會是由騰訊主辦，廣邀國內外的前端大牛，有著名流行框架的作者知名前端書籍的作者工程化方面的權威等。 showImg(https://segmentfault.com/img/bVQk0r?w=757&h=427); 共 2462 字，讀完需 4 分鐘。騰訊前端技術大會（TFC...

tinylcy 2019-08-20 17:46 評論0 收藏0
前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

摘要：工程實踐立足實踐，提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數，其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底，論證了內聯函數并不一定就會拖慢性能，過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 評論0 收藏0
您的四月份前端補給包已到，請查收～

摘要：版本發布月日，官博發文宣告正式發布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競爭力，并同時發現業務中的問題，跨端推進解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術快報，聚焦業界新視界；前端領域急速發展的節奏...

wushuiyong 2019-08-02 16:15 評論0 收藏0
您的四月份前端補給包已到，請查收～

摘要：版本發布月日，官博發文宣告正式發布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競爭力，并同時發現業務中的問題，跨端推進解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術快報，聚焦業界新視界；前端領域急速發展的節奏...

amc 2019-08-23 17:14 評論0 收藏0