可複用 React 的 HOC 以及的 Render Props

cnyballk發表於2018-07-15
React

重複是不可能的，這輩子都不可能寫重複的程式碼

當然，這句話分分鐘都要被產品(領導)打臉，真的最後一次改需求，我們煩惱於頻繁修改的需求

雖然我們不能改變別人，但我們卻可以嘗試去做的更好，我們需要抽象，封裝重複的功能或者邏輯，而不是老舊的重複著機械的複製貼上修改

那麼我們如何去封裝 React 中的元件以及邏輯呢？

這次我們來講講 React 裡的高階元件

React 高階元件有兩種方式:

  1. 使用高階元件( Higher Order Component ==> HOC )
  2. 子元件作為函式的模式( Render Props )

高階元件

首先來說說高階元件，它不是 React 的提供的 API，它是模式，一種增強元件的模式，簡單來說其實就是高階函式，高階函式大家應該不陌生

高階函式 : 把函式作為引數傳入，返回一個新的函式，這樣的函式稱為高階函式

而所謂的高階元件也就是傳入一個現有元件作為引數，返回一個新的元件，高階租價也分為代理方式和繼承方式
我們先來看看一個簡單的 HOC :

import React from `react`;

function addNameProp(WrapperComponent) {
  return class extends React.Component {
    render() {
      const { name, ...props } = this.props;
      return <WrapperComponent {...props} name={name || `cnyballk`} />;
    }
  };
}

export default addNameProp;

在上面的程式碼裡我們定義了一個 addNameProp。 函式，它的作用就是為沒有傳入 name 的 prop 傳入的元件新增一個 name 的 prop ，然後渲染出來

這個高階元件就完成了對傳入元件的增強，這也是一個代理方式的高階元件，

那麼繼承方式是怎麼樣的呢

import React from `react`;

function addNameProp(WrapperComponent) {
  return class extends WrapperComponent {
    render() {
      this.props = {
        ...this.props,
        name: this.props.name || `cnyballk`,
      };
      return super.render();
    }
  };
}

export default addNameProp;

和上面的高階元件 一樣的效果，而繼承模式和代理模式最大的區別就是一個是返回傳入的元件，一個是呼叫繼承的父元件的 render 方法

⚠️ 在代理模式下 WrapperComponent 經歷了完整的生命週期，返回的元件也有一次完整的生命週期，而繼承模式 則是呼叫了 WrapperComponent 的 render ，只有返回的元件的一個生命週期

如果我們用過 react-redux 的 connect 也就知道 connect 也是一個代理模式的高階元件

⚠️ 高階元件可以這麼使用

@Wrapper
class Index extends Component {
   ...略
}

emmmm…這個涉及到 js 的裝飾器，各位自己去搜來學習哈

Render Props

那麼我們已經認識了高階元件的重用方法，也認識到了高階元件的優點。

但是高階元件的缺點是什麼呢？

相信你們也能看到了，我們傳遞一個 name 的 Prop ，那是不是得傳入的元件能夠處理才可以，而且還有命名的衝突危險，畢竟有些元件的 props 命名各有不同，或者說子元件需要同一份資料處理方式卻不一樣，所以說這個時候就不適用 HOC 了

HOC 對於使用者來說是一個黑盒，還需要去看他們的實現

而 Render Props 則是 資料給你，其他的你自己來
我們來看一個簡單的例子

import React from `react`;

class AddNameProp extends React.Component {
  render() {
    const name = `cnyballk`;
    return this.props.children(name);
  }
}

export default AddNameProp;

簡單的使用

<AddNameProp>{name => <div>我叫 {name}</div>}</AddNameProp>

想傳遞給元件

<AddNameProp>
  {name =>
    <Hello name={name}/>;
  }
</AddNameProp>

或者是其他的 prop 名

<AddNameProp>
  {name =>
    <Hello myName={name}/>;
  }
</AddNameProp>

我們可以看到，這個方式很靈活，因為子元件是一個函式，一切皆有可能，但是 Render Props 也有缺點就是難以做效能優化，高階元件可以利用 SCU 來避免重複渲染。雖然這樣，，Render Props 卻是一個非常好(牛逼)的一個模式，我很喜歡

Render Props VS HOC

我們能夠清楚的明白，HOC是一種粗粒度的程式碼複用，而Render Props是一種細粒度的複用，他們可以互換，我們什麼時候用HOC，什麼時候用Render Props相信大家也差不多清楚了

小結

本文介紹了 React 的高階元件的兩個方式，各有優缺點，但它們都是為了重用程式碼，我們可以自己選擇喜歡的模式去做，但是不要複製貼上了，感受封裝複用的力量

高階元件代理模式可以更好的控制和實現，繼承模式則可以控制特定元件的生命週期，與高階元件相比， Render Props 模式更加靈活，有函式，我們可以更自由

相關文章