【譯】三分鐘掌握 React 高階組件

時間 2019-11-06

標籤三分 3分掌握 react 高階組件欄目 React 简体版

原文原文鏈接

掌握這個有用的模式，中止在 React Components 中重複邏輯！ 😎
原文：React Higher Order Components in 3 minutes
做者：Jhey Tompkins
譯者：博軒javascript

PS：今天是母親節，先祝全部母親大人們節日快樂啦 👏👏👏html

什麼是高階組件？

高階組件（HOC）是 React 中用於複用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分，它是一種基於 React 的組合特性而造成的設計模式。java

譯註：對，我又一次借鑑了官網 😂

它作了什麼？

他們接收一個組件並返回一個新的組件！react

何時去使用？

當你的組件之間出現重複的模式 / 邏輯的時候。設計模式

栗子：app

掛載，訂閱數據
爲 UI 增長交互（也可使用容器組件，或者 Render Props）
排序，過濾輸入的數據

譯註：第三個說法，我我的可能更加傾向於在傳入組件以前作處理，而不是使用高階組件

一個愚蠢的例子

咱們有一個 Mouse 組件。函數

const Mouse = () => (
    <span className="mouse" role="img">🐭</span>
)

接下來，讓咱們使用 GreenSock’s Draggable 模塊，來讓組件變的能夠拖拽。this

class Mouse extends Component {
    componentDidMount = () => new Draggable(this.ELEMENT)
    render = () => (
        <span className="mouse" ref={e => (this.ELEMENT = e)} role="img">🐭</span>
    )
}

咱們加一隻貓 🐱spa

const Cat = () => (
    <span className="cat" role="img">🐱</span>
)

這個組件一樣須要變得可拖拽✋，接下來，讓咱們使用高階組件（HOC）來試一下：翻譯

const withDrag = Wrapped => {
    class WithDrag extends Component {
        componentDidMount = () => new Draggable(this.ELEMENT)
        render = () => {
            return (
                <span className="draggable_wrapper" ref={e => (this.ELEMENT = e)}>
                    <Wrapped  {...this.props} />
                </span>
            )
        }
    }
    WithDrag.displayName = `WithDrag(${Wrapped.displayName || Wrapped.name})`
    return WithDrag;
}

咱們的高階組件（HOC）能夠經過 props 接受一組件，並返回一個新的組件。

許多高階組件會在傳遞組件的過程當中，注入新的 props 。這一般是決定咱們是否應該使用高階組件的因素之一。若是，咱們不注入 props ，咱們可使用一個容器組件，或者 Render Props。

對於咱們的高階組件（HOC），咱們也可使用 Render Props 來達到相同的效果。你可能會以爲使用 HOC 來實現並不合適。可是，這個 「愚蠢的例子」 會讓你更加熟悉 HOC 。這比注入數據的示例更加有趣！😉

讓咱們將這個 HOC 應用到 Cat 和 Mouse 組件上吧 👍

const Mouse = () => (
    <span className="mouse" role="img">🐭</span>
)
const Cat = () => (
    <span className="cat" role="img">🐱</span>
)
const DraggableMouse = withDrag(Mouse)
const DraggableCat = withDrag(Cat)

class App extends Component {
    render = () => (
        <Fragment>
            <DraggableMouse />
            <DraggableCat />
        </Fragment>
    )
}

接下來，讓咱們在高階組件中增長 onDrag 回調函數，並在 props 中注入 x 和 y 的位置屬性。

const withDrag = Wrapped => {
    class WithDrag extends Component {
        state = {
            x: undefined,
            y: undefined,
        }
        componentDidMount = () => new Draggable(this.ELEMENT, { onDrag: this.onDrag })
        onDrag = e => {
            const { x, y } = e.target.getBoundingClientRect();
            this.setState({ x: Math.floor(x), y: Math.floor(y) })
        }
        render = () => (
            <span className="draggable_wrapper" ref={e => (this.ELEMENT = e)}>
                <Wrapped  {...this.props} x={this.state.x} y={this.state.y} />
            </span>
        )
    }
    WithDrag.displayName = `WithDrag(${Wrapped.displayName || Wrapped.name})`
    return WithDrag;
}

const Mouse = () => (
    <span className="mouse" role="img">
        🐭
        {x !== undefined && 
            y !== undefined && (
                <span className="mouse__position"> {`(${x}, ${y})`} </span>
        )}
    </span>
)

如今 Mouse 組件會向用戶展現他的 XY 位置屬性 🤓

咱們也能夠給 HOC 傳遞 props。而後在傳遞的過程當中過濾掉這些無用的屬性。舉個例子，傳遞一個 onDrag 回調函數。

const withDrag = Wrapped => {
    class WithDrag extends Component {
        componentDidMount = () => new Draggable(this.ELEMENT, { onDrag: this.props.onDrag })
        render = () => {
            const { onDrag, ...passed } = this.props;
            return (
                <span className="draggable__wrapper" ref={e => (this.ELEMENT = e)}>
                    <Wrapped  {...passed} />
                </span>
            )
        }
    }
    WithDrag.displayName = `WithDrag(${Wrapped.displayName || Wrapped.name})`
    return WithDrag;
}

class App extends Component {
    render = () => (
        <Fragment>
            <DraggableMouse
                onDrag={e => console.info(e.target.getBoundingClientRect())}
            />
        </Fragment>
    )
}

經過使用 HOC ，咱們的組件仍然很簡單，複雜的邏輯都交給 HOC 來處理了。咱們的組件只關心傳遞給他們的內容。咱們能夠在其餘地方重複使用它們並且不會有能夠被拖拽的屬性。這使得咱們的應用更容易維護。

優秀的實踐 👍

當出現重複的模式的時候，使用它們
爲了方便調試，須要更新處理以後組件的 displayName
傳遞與當前 HOC 無關的全部 props

糟糕的實踐 👎

過分使用，其餘模式可能會更加適合
改變原始組件
在 render 方法中使用高階組件

譯註：永遠不要在 React render() 方法中定義 React 組件（甚至是無狀態組件）。 React 在每次更新狀態的時候，都會廢棄舊的 html DOM 元素並將其替換爲全新的元素。好比在 render() 函數中定義一個輸入組件，元素被替換以後就會失去焦點，每次只能輸入一個字符。