React 導讀（四）

cooxer 發布于2019-08-22 15:35 / 2566人閱讀

摘要：一前言在導讀三中介紹了項目的背景功能需求項目結構以及組件的劃分層次，接下來我們就來看下實際的代碼，這一篇文章會主要分享用到的基礎組件的封裝。

一、前言

在 React 導讀（三）中介紹了項目的背景、功能需求、項目結構以及組件的劃分層次，接下來我們就來看下實際的代碼，這一篇文章會主要分享用到的基礎組件的封裝。

二、基礎組件設計

我們在設計組件之前本來是有一個流程和過程的，這里我寫的組件并不會像社區內的組件庫一樣完善或者說一定考慮很完整，但是這樣也會有一個好處，可以按照自己項目的需求進行定制、擴展以及冗余的代碼會更少，當然很多時候節約的這點代碼可以忽略不計(特別是項目業務代碼和庫的代碼比例上升到一定比例過后，所以一切不說場景就說某某庫太大的觀點都是不正確的)，因為大家都有按需加載的配置可選。這不是絕對的，不一定說你自己花時間和精力去開發一個這樣的庫就更好，因為隨著項目規模的擴大，組件的種類和需求會越來越多，即使是一個不錯的工程師利用技巧保障項目持續迭代，但是人的時間和精力是有限的，更合理的利用現有資源去提高效率才是最優先考慮的事情。

我這里的基礎組件實現了這么幾個：
Button, Dialog, Input, Loading, Table

然后分別來介紹一下如何基礎開始封裝和拆合組件。其實基礎組件的設計是很殺腦細胞的，如果要考慮很周全的話，因為要兼顧別人用的爽，也盡可能要保留可擴展性，基礎組件如果擴展性太弱，基本等于廢了。其實如果有學習設計模式是可以相互連接的，因為設計模式是成熟的經驗，不是說非要在寫某種邏輯代碼或者做架構設計的時候才能使用，它是能夠貫穿在整個軟件周期內的。

(1) 思考想要如何去組織組件樣式

首先這里的組件是 css 和 js 最好能夠分開使用的(這里的分開使用不是指傳統意義的分離，而是保持獨立，可進可退)，拿以前 UI 需求來看，就是在同一個結構的 HTML，加上 class 都是能夠正常展現的，我這里的 css 結構是以前用過的，也沒做什么改動直接拿過來使用的。這種設計思路其實和現在的組件化開發是不沖突的，組件化后還能夠使得這種模式更簡單的被實現，因為你只需要考慮組件這個作用域內的樣式。

(2) Dialog 組件
這里先拿 Dialog 組件先舉例，這里我將彈框組件分成了三部分：DialogHeader, DialogFooter, Dialog 拆分上也沒什么理由，這是一種簡單直接的拆分，因為很多彈框都具有這么幾部分：標題、內容、按鈕區域。

而且不只是這樣的才叫彈框，彈框如其名：彈出的框，所以都是可以的，比如下面這種像個 Alert 一樣的彈框：

我理解的好擴展的組件就像小時候玩的玩具一樣，各部分都是可拆解可組合的，所以彈框的這三部分都需要有一定靈活的地方。來看看代碼，其實蠻簡單的。

class Dialog extends React.Component {
    render() {
        const {
            renderHeader,
            renderFooter,
            className,
        } = this.props;

        const header = renderHeader ? renderHeader() : null;
        const footer = renderFooter ? renderFooter() : null;

        const wrapClassName = cx("st-dialog", className);

        return (
            
                
                    {header}
                    {this.props.children}
                    {footer}
                
                
            
        );
    }
}

上面就是一個我這里 Dialog 的結構，header和footer采用的是render-props的方式來實現具體的插入，為什么能夠采用這種方式其實不難理解，因為在 React 中，一個函數就自然就是一個組件聲明，返回值就能是一個組件實例。我這里更直接，你要組件返回值，我就給你一個組件...使用上就是這樣：

// 這里結構稍微代碼有點多，就不要揉在一起了，給一個變量存一下更清晰，在 React 中組件的使用是自由的。
const footer = (
    
);

 }
    renderFooter={() => footer}>
    ...

為什么要這樣設計呢？主要還是因為有時候需求不定，萬一哪天 DialogFooter 組件不是這樣子，我就在外面實現好組件給這個renderFooter就行了，其他部分就不需要改動，還有就是實現的時候不要吝嗇div這種容器標簽的使用，多一層就多一個權重，少一層就多了一份自由。

現在還有一個問題，就是我的基礎彈框有了，業務彈框各種各樣，這么簡單的一個封裝根本不靠譜啊...那么這里你就將彈框作為一個流行的渲染組件來使用，但是是否掛載到業務模塊中就使用封裝的一層業務彈框來控制，比如我的業務彈框叫 EmployeeAddDialog，在 render 方法中：

if(!this.props.visible) {
    return null;
}

return ();

通過一個 visible 的 props 值來控制是否掛載 Dialog，那么這樣做就有一個好處，在處理異步彈框的時候，想什么時候關閉彈框可以由業務的流程來控制。在業務組件聲明業務彈框的地方就這樣：

然后這樣就實現了一個彈框了，靈活性和擴展性都還好，最后還有一個細節就是這個EmployeeAddDialog始終都掛載在業務組件中，業務組件渲染一次這個彈框更新周期也會走一次，所以能夠繼承一下PureComponent來簡單避免多次執行不必要代碼：

class EmployeeAddDialog extends React.PureComponent { }

看上去這個彈框組件還算干凈，不可能啊，業務太復雜也不會太干凈，那么臟的東西去哪兒了呢？我這里有 2 個比較臟的地方：

(1) Footer，因為有按鈕，每個需求的按鈕是不一樣的；
(2) 彈框的內容，這里就更是千奇百怪，每個產品經理的腦洞都不一樣。

我這里應對上 Footer 有一定的定制又有簡單的開關，比如我就支持2個按鈕：提交類、關閉類。

彈框內容我控制不了，那么我就把代碼是否更臟的職責交出去，使用了 this.props.children來做這個事情，使用者的代碼干凈度來決定最后的業務彈框干凈度。

具體的全部代碼能夠在這里看到：

基礎 Dialog

業務 Dialog

今天先到這里吧，睡覺了?

GPU云服務器云服務器 webrtc 源碼導讀 react _React React 源碼

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

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

React 導讀（一）

摘要：需要有一定的基礎和的使用經驗。這就是屬性的作用。方法接收一個新對象來重新賦值。也接收一個函數，這個回調函數這里我默認有一個參數，表示之前的的值，這個函數的返回值就是最新的。但是不同的是在組件內部是只讀的。前言寫這篇文章的主要目標是讓初學者更快的上手 React 的項目開發，能有一個循循漸進的理解過程。需要有一定的 JavaScript 基礎和 NPM 的使用經驗。不多說了，下面會按...

kumfo 2019-08-22 15:35 評論0 收藏0
React 導讀（三）

摘要：場景為了更清晰的安排年前年后的工作和值班，現在要對過年期間人員請假的情況進行統計，并且進行一個簡單的管理。我們現在來訂閱一個名為的事件，用來表示表格中需要展示每條數據。前言 React 導讀（一）React 導讀（二）在之前 2 篇文章中中學習到了寫第一個 Web 組件以及常用的生命周期函數的使用，這篇文章將繼續之前的目錄，開始新的知識點補充： [x] React 如何編寫 He...

zzir 2019-08-22 15:35 評論0 收藏0
React 導讀（二）

摘要：對于最開始關注的是的初始化以及在哪里請求。在進行初始化，推薦在中進行請求。是在組件即將被卸載前一刻的鉤子，一般用于取消中訂閱的事件等作用，清理一些不要的變量等，避免內存泄漏。第二條的原因額，說好的更新才調，初始化不調用是符合邏輯的。前言在上篇文章React 導讀（一）中學習到了寫第一個 Web 組件，這篇文章將繼續之前的目錄，開始新的知識點補充： [x] React 如何編寫 H...

Doyle 2019-08-22 15:35 評論0 收藏0
《深入理解ES6》筆記——導讀

摘要：最近買了深入理解的書籍來看，為什么學習這么久還要買這本書呢主要是看到核心團隊成員及的創造者為本書做了序，作為一個粉絲，還是挺看好這本書能給我帶來一個新的升華，而且本書的作者也非常厲害。使用ES6開發已經有1年多了，以前看的是阮一峰老師的ES6教程，也看過MDN文檔的ES6語法介紹。最近買了《深入理解ES6》的書籍來看，為什么學習ES6這么久還要買這本書呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 評論0 收藏0