可靠React組件設計的7個準則之組合和複用

時間 2019-11-10

標籤可靠 react 組件設計準則組合欄目 React 简体版

原文原文鏈接

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

原文的篇幅很是長，不過內容太過於吸引我，仍是忍不住要翻譯出來。此篇文章對編寫可重用和可維護的React組件很是有幫助。但由於篇幅實在太長，我對文章進行了分割，本篇文章重點闡述 組合和複用。因水平有限，文中部分翻譯可能不夠準確，若是你有更好的想法，歡迎在評論區指出。html

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

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

組合

一個組合式組件是由更小的特定組件組合而成的。

組合（composition）是一種經過將各組件聯合在一塊兒以建立更大組件的方式。組合是 React 的核心。react

幸運的是，組合易於理解。把一組小的片斷，聯合起來，建立一個更大個兒。git

讓咱們來看一個常見的前端應用組合模式。應用由頭部的 header、底部的 footer、左側的 sidebar，還有中部的有效內容聯合而成：github

<div id="root"></div>

function Application({ children }) {
    return (
        <div className="application box">
            <Label>Application</Label>
            {children}
        </div>
    );
}

function Header() {
    return (
        <div className="header box">
            <Label>Header</Label>
        </div>
    )
}

function Footer() {
    return (
        <div className="header box">
            <Label>Footer</Label>
        </div>
    )
}

function Sidebar({ children }) {
    return (
        <div className="sidebar box">
            <Label>Sidebar</Label>
            {children}
        </div>
    );
}

function Content({ children }) {
    return (
        <div className="content box">
            <Label>Content</Label>
            {children}
        </div>
    )
}

function Menu() {
    return (
        <div className="menu box">
            <Label>Menu</Label>
            <div className="description">
                <div className="text shorter" />
                <div className="text" />
                <div className="text shorter" />
                <div className="text shorter" />
            </div>
        </div>
    );
}

function Article() {
    return (
        <div className="article box">
            <Label>Article</Label>
            <div className="description">
                <div className="text shorter" /> <div className="text longer" />
                <div className="text shorter" /> <div className="text" />
                <div className="text shorter" /> <div className="text" />
                <div className="text" /> <div className="text shorter" />
                <div className="text shorter" /> <div className="text" />
                <div className="text" /> <div className="text shorter" />
                <div className="text shorter" /> <div className="text longer" />
                <div className="text shorter" /> <div className="longer" />
                <div className="text shorter" /> <div className="text" />
                <div className="text" /> <div className="text shorter" />
                <div className="text shorter" /> <div className="text" />
            </div>
        </div>
    );
}

function Label({ children }) {
    return <div className="label">&lt;{children}&gt;</div>
}

const app = (
    <Application>
        <Header />
        <Sidebar>
            <Menu />
        </Sidebar>
        <Content>
            <Article />
        </Content>
        <Footer />
    </Application>
);

ReactDOM.render(app, document.getElementById('root'));

應用程序演示了組合如何構建應用程序。這種組織這樣組織代碼即富於表現力又便於理解。redux

React 組件的組合是天然而然的。這個庫使用了一個聲明範式，從而不會抑制組合式的表現力。react-router

<Application> 由 <Header> 、 <Sidebar> <Content> 和 <Footer> 組成. <Sidebar> 有一個 <Menu> 組件, <Content> 有一個 <Article> 組件.app

那麼組合與單一責任以及封裝有什麼聯繫呢？讓咱們一塊兒看看：

單一責任原則描述瞭如何將需求拆分爲組件，封裝描述瞭如何組織這些組件，組合描述瞭如何將整個系統粘合在一塊兒。

組合的好處

單一責任

組合的一個重要方面在於可以從特定的小組件組成複雜組件的能力。這種分而治之的方式幫助了被組合而成的複雜組件也能符合 SRP 原則。

回顧以前的代碼片斷，<Application> 負責渲染 header 、footer 、sidebar 和主體區域。

將此職責分爲四個子職責是有意義的，每一個子職責由專門的組件實現，分別是<header> 、<sidebar> 、<content> 和 <footer>。隨後，這些組件被粘合在 <Application> 。

如今來看看組合的好處：經過子組件分別實現單一職責的方式，使 <Application> 組件也符合單一責任原則。

可重用

組合有可重用的有點，使用組合的組件能夠重用公共邏輯，

例如，組件 <Composed1> 和 <Composed2> 有一些公共代碼：

const instance1 = (
    <Composed1>
    /* Specific to Composed1 code... */
    /* Common code... */
    </Composed1>
);
const instance2 = (
    <Composed2>
    /* Common code... */
    /* Specific to Composed2 code... */
    </Composed2>
);

代碼複製是一個很差的實踐(例如更改 Composed1 的代碼時，也須要去更改Composed2 中的代碼)，那麼如何使組件重用公共代碼？

首先，將共同代碼封裝到一個新組件中，如 <Common> 中，而後

首先，在新組件中封裝公共代碼。其次，<Composed1> 和 <Composed2> 應該使用組合的方式來包含 <Common>組件，以免代碼重複，以下：

const instance1 = (
    <Composed1>
        <Piece1 />
        <Common />
    </Composed1>
);
const instance2 = (
    <Composed2>
        <Common />
        <Piece2 />
    </Composed2>
);

可重用的組件符合不重複本身(Don't repeat yourself)的原則。這種作法能夠節省你的精力和時間，而且在後期，有利於代碼維護。

靈活

在 react 中，一個組合式的組件經過給子組件傳遞 props 的方式，來控制其子組件。這就帶來了靈活性的好處。

例如，有一個組件，它須要根據用戶的設備顯示信息，使用組合能夠靈活地實現這個需求：

function ByDevice({ children: { mobile, other } }) {
    return Utils.isMobile() ? mobile : other;
}

<ByDevice>{{
    mobile: <div>Mobile detected!</div>,
    other: <div>Not a mobile device</div>
}}</ByDevice>

<ByDevice> 組合組件，對於移動設備，顯示: Mobile detected!; 對於非移動設備，顯示 Not a mobile device"。