React高階組件

ThinkSNS 發布于2019-08-22 15:47 / 1784人閱讀

摘要：結語高階函數對于初學者來說可能不太好理解，但當你深入其中，了解其中的原理之后，我們可以使用高階函數來完成很多的工作。

前段時間在工作中寫Hybrid頁面時遇到了這樣的一個場景，公司需要一系列的活動組件，在每個組件注冊的時候都需要調用App端提供的一個接口。一開始也考慮了幾種方式，包括mixin、組件繼承以及react高階組件。但經過了種種衡量，最后選擇使用了高階組件的做法。

1、Mixins的缺點

React官方已不推薦使用Mixins的技術來實現代碼的重用，Mixins技術有一系列的缺點，首先Mixins會造成命名沖突，我們通過以下的方式來注入Mixins：

var myMixins = require("myMixins");

var Button = React.createClass({
    mixins: [myMixins],
    
    // ...
})

如果你需要注入多個mixins,其中一個是自己的，另外的可能是第三方的。那有可能在兩個mixins里使用了相同名稱的方法，這會使得其中的一個不起作用，而你能做的只有修改其中一個方法的名稱。另一方面，一個mixins一開始可能是非常簡單的，僅僅需要實現某一個功能，但當業務越加的復雜，需要往其中加入更多的方法的時候，就會變得非常復雜。要深入了解mixins的缺點，可以查看官方博客。

2、組件繼承

對于我自己來說這種方法以前使用的比較多，先創建一個BaseComponent，在其中實現一系列公共的方法，其后的每個組件都繼承于這個組件，但缺點是不夠靈活，在基礎組件中只能實現一些比較固定的方法，而對于每個組件的定制化會有很大的限制。

3、React高階組件

由于mixins的一系列缺點，React官方也意識到使用mixins所帶來的痛點遠遠高于技術本身產生的優點，而高階組件便可以代替mixins，而且當深入之后它還有著更加豐富的用法。

高階組件（HOC）是React中對組件邏輯進行重用的高級技術。但高階組件本身并不是React API。它只是一種模式，這種模式是由React自身的組合性質必然產生的。

高階函數

說到高階組件，就先得說到高階函數了，高階函數是至少滿足下列條件的函數：

1、接受一個或多個函數作為輸入  
2、輸出一個函數

在javascript這門函數為一等公民的語言中，高階函數的使用還是非常之多的，像我們平時的回調函數等等，都用到了高階函數的知識。我們先來看一個簡單的高階函數

var fun = function(x, y) {
    return x + y;
}

fun是一個函數，下面我們將整個函數作為參數傳遞給另一個函數

var comp = function(x, y, f) {
    return f(x,y);
}

驗證一下

comp(1,2,fun) // 3

高階組件定義

類比高階函數的定義，高階組件就是接受一個組件作為參數，在函數中對組件做一系列的處理，隨后返回一個新的組件作為返回值。

我們先定義一個高階組件BaseActivity

const BaseActivity = (WrappedComponent) => {
  return class extends Component {
    render() {
      return (
        
          我的包裹組件
          
        
        
      )
    }
  }
}

組件接受一個被包裹的組件作為參數，返回了一個經過處理的匿名組件。
在其他組件中使用這個高階組件

class Example extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      width: "100%",
      height: "100%"
    }
  }

  componentWillMount() {
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      return;
    } else {
      this.setState({
        width: "375px",
        height: "640px"
      })
    }
  }

  render() {
    let { width, height } = this.state;
    return (
      
        
          
        
      
    )
  }
}

export default BaseActivity(Example);

具體用法就是在export 組件的時候，使用BaseActivity函數來包裹這個組件，看下輸出的react dom內容

在Example組件外面包裹了一個匿名組件。

參數

既然高階組件是一個函數，我們就可以向里面傳遞我們需要的參數

const BaseActivity = (WrappedComponent, title) => {
  return class extends Component {
    render() {
      return (
        
          {title}
          
        
        
      )
    }
  }
}

在Example中這樣export

export default BaseActivity(Example, "這是高階組件的參數");

我們看下輸出的react dom

可以看到參數已經傳遞進去了。

當然還可以這樣用(柯里化)

const BaseActivity (title) => (WrappedComponent) => {
  return class extends Component {
    render() {
      return (
        
          {title}
          
        
        
      )
    }
  }
}

在Example中這樣export

export default BaseActivity("這是高階組件的參數")(Example);

這種用法在ant-design的表單以及redux的connect中我們都可以看到

// ant
const WrappedDemo = Form.create()(Demo)

// redux
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

高階組件還可以擴展原組件的props屬性，如下所示：

const BaseActivity (title) => (WrappedComponent) => {
  return class extends Component {
    render() {
      const newProps = {
          id: Math.random().toString(8)
      }
      return (
        
          {title}
          
        
      )
    }
  }
}

看下輸出的react dom

高階組件的缺點

高階組件也有一系列的缺點，首先是被包裹組件的靜態方法會消失，這其實也是很好理解的，我們將組件當做參數傳入函數中，返回的已經不是原來的組件，而是一個新的組件，原來的靜態方法自然就不存在了。如果需要保留，我們可以手動將原組件的方法拷貝給新的組件，或者使用hoist-non-react-statics之類的庫來進行拷貝。

結語

高階函數對于初學者來說可能不太好理解，但當你深入其中，了解其中的原理之后，我們可以使用高階函數來完成很多的工作。

如果喜歡就給個Star吧，^_^

GPU云服務器云服務器高階組件高階函數高階 php高階

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93755.html

React 深入系列6：高階組件

摘要：在項目中用好高階組件，可以顯著提高代碼質量。高階組件的定義類比于高階函數的定義。高階函數接收函數作為參數，并且返回值也是一個函數。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 1. 基本概念高階組件是React 中一個很重要且比較復雜的概念，高階組件在很多第三方庫（如Redux）中都...

2shou 2019-08-22 17:28 評論0 收藏0
深入淺出React高階組件

摘要：博客地址背景知識在開始講述高階組件前，我們先來回顧高階函數的定義接收函數作為輸入，或者輸出另一個函數的一類函數，被稱作高階函數。博客地址：http://www.luckyjing.com/post... 背景知識在開始講述高階組件前，我們先來回顧高階函數的定義：接收函數作為輸入，或者輸出另一個函數的一類函數，被稱作高階函數。對于高階組件，它描述的便是接受React組件作為輸入，輸出...

yuanzhanghu 2019-08-20 18:20 評論0 收藏0
從零開始學習 React 高階組件

01、介紹 React 高階組件也叫做 React HOC(High Order Component), 它是react中的高級技術, 用來重用組件邏輯。但高階組件本身并不是React API。它只是一種模式，這種模式是由react自身的組合性質必然產生的。那么在學習高階組件之前有一個概念我們必須清楚，就是高階函數。 02、高階函數概念：高階函數是一個函數，它接收函數作為參數或將函數作...

_Dreams 2019-08-23 16:19 評論0 收藏0
React高階組件

摘要：高階組件高階函數接收函數作為輸入，或者輸出另一個函數的一類函數高階組件接收組件作為輸入，輸出一個新的組件的組件。包含了一系列實用的高階組件庫拖動庫深入理解高階組件其中詳細介紹了屬性代理和反向繼承的區別。 React高階組件高階函數：接收函數作為輸入，或者輸出另一個函數的一類函數；高階組件：接收React組件作為輸入，輸出一個新的React組件的組件。高階組件通過包裹一個新傳入...

cncoder 2019-08-26 13:35 評論0 收藏0
七進七出React高階組件

摘要：為了提高代碼的復用性和可維護性，高階函數應運而生。使用過的同學，不知道有沒有使用過，高階函數的作用和它是一樣的。高階函數在編程中扮演的角色就是火鍋鍋底的角色，它有公用的方法和屬性，而各種組件就是肉和蔬菜。為什么要使用高階組件？想想以前用原生和jQuery的項目，上千行的code映入眼簾，瞬間有種昏死過去的沖動。代碼難以維護，改一個bug可能出現N個bug，真的是很痛苦。于是乎組件化...

miguel.jiang 2019-08-21 17:21 評論0 收藏0