可複用 React 的 HOC 以及的 Render Props

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

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

雖然咱們不能改變別人，但咱們卻能夠嘗試去作的更好，咱們須要抽象，封裝重複的功能或者邏輯，而不是老舊的重複着機械的複製粘貼修改

那麼咱們如何去封裝 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 模式更加靈活，有函數，咱們能夠更自由