成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

兩年React老兵的總結(jié) - 如何組織React項(xiàng)目

hoohack / 3317人閱讀

摘要：一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來的隨著越來越多的功能加入項(xiàng)目代碼就會(huì)變得越來越難以控制本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組織讓項(xiàng)目具備可維護(hù)性系列目錄類型檢查組件的組織樣式的管理組件的思維狀態(tài)管理目錄組件設(shè)計(jì)的基本原則基本原則高

一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來的, 隨著越來越多的功能加入項(xiàng)目, 代碼就會(huì)變得越來越難以控制. 本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組織, 讓項(xiàng)目具備可維護(hù)性.

系列目錄

01 類型檢查

02 組件的組織

[03 樣式的管理]()

[04 組件的思維]()

[05 狀態(tài)管理]()

目錄

1. 組件設(shè)計(jì)的基本原則

基本原則

高質(zhì)量組件的特征

2. 基本技巧

3. 組件的分類

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

2?? 分離邏輯和視圖

3?? 有狀態(tài)組件和無狀態(tài)組件

4?? 純組件和非純組件

5?? 按照 UI 劃分為布局組件和內(nèi)容組件

6?? 接口一致的數(shù)據(jù)錄入組件

4. 目錄劃分

1?? 基本目錄結(jié)構(gòu)

2?? 多頁應(yīng)用的目錄劃分

3?? 多頁應(yīng)用的目錄劃分: monorepo 模式

4?? 跨平臺(tái)應(yīng)用

5?? 跨平臺(tái)的另外一種方式: taro

5. 模塊

1?? 創(chuàng)建嚴(yán)格的模塊邊界

2?? Named export vs default export

3?? 避免循環(huán)依賴

4?? 相對(duì)路徑不要超過兩級(jí)

6. 拆分

1?? 拆分 render 方法

2?? 拆分為組件

7. 組件劃分示例

1?? 劃分頁面

2?? 劃分基礎(chǔ) UI 組件

3?? 設(shè)計(jì)組件的狀態(tài)

8. 文檔

擴(kuò)展

1. 組件設(shè)計(jì)的基本原則 基本原則

單一職責(zé)(Single Responsibility Principle). 這原本來源于面向?qū)ο缶幊? 規(guī)范定義是"一個(gè)類應(yīng)該只有一個(gè)發(fā)生變化的原因", 白話說"一個(gè)類只負(fù)責(zé)一件事情". 不管是什么編程范式, 只要是模塊化的程序設(shè)計(jì)都適用單一職責(zé)原則. 在 React 中, 組件就是模塊.

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

往往一開始我們?cè)O(shè)計(jì)的組件都可能復(fù)合多個(gè)職責(zé), 后來出現(xiàn)了代碼重復(fù)或者模塊邊界被打破(比如一個(gè)模塊依賴另一個(gè)模塊的"細(xì)節(jié)"), 我們才會(huì)惰性將可復(fù)用的代碼抽離. 隨著越來越多的重構(gòu)和迭代, 模塊職責(zé)可能會(huì)越來越趨于"單一"(

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105652.html

相關(guān)文章

  • 兩年React老兵的總結(jié) - 類型檢查篇

    摘要：系列引言最近準(zhǔn)備培訓(xùn)新人為了方便新人較快入手開發(fā)并編寫高質(zhì)量的組件代碼我根據(jù)自己的實(shí)踐經(jīng)驗(yàn)對(duì)組件設(shè)計(jì)的相關(guān)實(shí)踐和規(guī)范整理了一些文檔將部分章節(jié)分享了出來由于經(jīng)驗(yàn)有限文章可能會(huì)有某些錯(cuò)誤希望大家指出互相交流由于篇幅太長(zhǎng)所以拆分為幾篇文章主要有以 系列引言 最近準(zhǔn)備培訓(xùn)新人, 為了方便新人較快入手 React 開發(fā)并編寫高質(zhì)量的組件代碼, 我根據(jù)自己的實(shí)踐經(jīng)驗(yàn)對(duì)React 組件設(shè)計(jì)的相關(guān)實(shí)踐...

    scola666 評(píng)論0 收藏0

  • 前端周刊第62期：學(xué)習(xí)學(xué)習(xí)再學(xué)習(xí)

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

    tinylcy 評(píng)論0 收藏0

  • 前端每周清單第 34 期：Vue 現(xiàn)狀盤點(diǎn)與 3.0 展望，React 代碼遷移與優(yōu)化，圖片優(yōu)化詳論

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

    CoderStudy 評(píng)論0 收藏0

  • 您的四月份前端補(bǔ)給包已到，請(qǐng)查收～

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

    wushuiyong 評(píng)論0 收藏0

  • 您的四月份前端補(bǔ)給包已到，請(qǐng)查收～

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

    amc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<