摘要：組件可以處理其他組件的實例化為了避免破壞封裝，請注意通過傳遞的內容。因此，將狀態管理的父組件實例傳遞給子組件會破壞封裝。讓我們改進兩個組件的結構和屬性，以便恢復封裝。組件的可重用性和可測試性顯著增加。

翻譯：劉小夕
原文鏈接：https://dmitripavlutin.com/7-...

原文的篇幅非常長，不過內容太過于吸引我，還是忍不住要翻譯出來。此篇文章對編寫可重用和可維護的React組件非常有幫助。但因為篇幅實在太長，我對文章進行了分割，本篇文章重點闡述 封裝。因本人水平有限，文中部分翻譯可能不夠準確，如果您有更好的想法，歡迎在評論區指出。

更多文章可戳: https://github.com/YvetteLau/...

———————————————我是一條分割線————————————————

一個封裝組件提供 props 控制其行為而不是暴露其內部結構。

耦合是決定組件之間依賴程度的系統特性。根據組件的依賴程度，可區分兩種耦合類型：

當應用程序組件對其他組件知之甚少或一無所知時，就會發生松耦合。

當應用程序組件知道彼此的許多詳細信息時，就會發生緊耦合。

松耦合是我們設計應用結構和組件之間關系的目標。

松耦合應用(封裝組件)

松耦合會帶來以下好處：

可以在不影響應用其它部分的情況下對某一塊進行修改。、

任何組件都可以替換為另一種實現

在整個應用程序中實現組件復用，從而避免重復代碼

獨立組件更容易測試，增加了測試覆蓋率

相反，緊耦合的系統會失去上面描述的好處。主要缺點是很難修改高度依賴于其他組件的組件。即使是一處修改，也可能導致一系列的依賴組件需要修改。

緊耦合應用(組件無封裝)

封裝 或 信息隱藏 是如何設計組件的基本原則，也是松耦合的關鍵。

封裝良好的組件隱藏其內部結構，并提供一組屬性來控制其行為。

隱藏內部結構是必要的。其他組件沒必要知道或也不依賴組件的內部結構或實現細節。

React 組件可能是函數組件或類組件、定義實例方法、設置 ref、擁有 state 或使用生命周期方法。這些實現細節被封裝在組件內部，其他組件不應該知道這些細節。

隱藏內部結構的組件彼此之間的依賴性較小，而降低依賴度會帶來松耦合的好處。

細節隱藏是隔離組件的關鍵。此時，你需要一種組件通信的方法：props。porps 是組件的輸入。

建議 prop 的類型為基本數據（例如，string 、 number 、boolean）：

;

必要時，使用復雜的數據結構，如對象或數組：

prop 可以是一個事件處理函數和異步函數：

prop 甚至可以是一個組件構造函數。組件可以處理其他組件的實例化：

function If({ component: Component, condition }) {
    return condition ?  : null;
}
  

為了避免破壞封裝，請注意通過 props 傳遞的內容。給子組件設置 props 的父組件不應該暴露其內部結構的任何細節。例如，使用 props 傳輸整個組件實例或 refs 都是一個不好的做法。

訪問全局變量同樣也會對封裝產生負面影響。

組件的實例和狀態對象是封裝在組件內部的實現細節。因此，將狀態管理的父組件實例傳遞給子組件會破壞封裝。

我們來研究一下這種情況。

一個簡單的應用程序顯示一個數字和兩個按鈕。第一個按鈕增加數值，第二個按鈕減少數值：

這個應用由兩個組件組成： 和 .

number 是 的 state 對象， 負責 將這個數字渲染到頁面。

// 問題: 封裝被破壞
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { number: 0 };
    }

    render() {
        return (
            

                {this.state.number}
                
            
        );
    }
}

負責渲染按鈕，并為其設置事件處理函數，當用戶點擊按鈕時，父組件的狀態將會被更新：number 加1或者減1((updateNumber()方法`)

// 問題: 使用父組件的內部結構
class Controls extends Component {
    render() {
        return (
            

                 this.updateNumber(+1)}>
                    Increase
          
                 this.updateNumber(-1)}>
                    Decrease
          
            
        );
    }

    updateNumber(toAdd) {
        this.props.parent.setState(prevState => ({
            number: prevState.number + toAdd
        }));
    }
}

當前的實現有什么問題？

第一個問題是： 的封裝被破壞，因為它的內部結構在應用中傳遞。 錯誤地允許 直接去修改其 state。

第二個問題是: 子組件 Controls 知道了太多父組件 的內部細節，它可以訪問父組件的實例，知道父組件是一個有狀態組件，知道父組件的 state 對象的細節(知道 number 是父組件 state 的屬性)，并且知道怎么去更新父組件的 state.

一個麻煩的結果是： 將很難測試和重用。對 結構的細微修改會導致需要對 進行修改（對于更大的應用程序，也會導致類似耦合的組件需要修改）。

解決方案是設計一個方便的通信接口，考慮到松耦合和封裝。讓我們改進兩個組件的結構和屬性，以便恢復封裝。

只有組件本身應該知道它的狀態結構。 的狀態管理應該從 （updateNumber()方法）移到正確的位置：即 組件中。

被修改為 設置屬性 onIncrease 和 onDecrease。這些是更新 狀態的回調函數:

// 解決: 恢復封裝
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { number: 0 };
    }

    render() {
        return (
            

                {this.state.number}
                 this.updateNumber(+1)}
                    onDecrease={() => this.updateNumber(-1)}
                />
            
        );
    }

    updateNumber(toAdd) {
        this.setState(prevState => ({
            number: prevState.number + toAdd
        }));
    }
}

現在， 接收用于增加和減少數值的回調，注意解耦和封裝恢復時： 不再需要訪問父組件實例。也不會直接去修改父組件的狀態。

而且， 被修改為了一個函數式組件:

// 解決方案: 使用回調函數去更新父組件的狀態
function Controls({ onIncrease, onDecrease }) {
    return (
        

            Increase
            Decrease
        
    );
}

組件的封裝已經恢復，狀態由其本身管理，也應該如此。

此外， 不在依賴 的實現細節，onIncrease 和 onDecrease 在按鈕被點擊的時候調用， 不知道(也不應該知道)這些回調的內部實現。

組件的可重用性和可測試性顯著增加。

的復用變得很容易，因為它除了需要回調，沒有其它依賴。測試也變得簡單，只需驗證單擊按鈕時，回調是否執行。

最后謝謝各位小伙伴愿意花費寶貴的時間閱讀本文，如果本文給了您一點幫助或者是啟發，請不要吝嗇你的贊和Star，您的肯定是我前進的最大動力。https://github.com/YvetteLau/...