React進(jìn)階之高階組件

前言

本文代碼淺顯易懂，思想深入實用。此屬于react進(jìn)階用法，如果你還不了解react，建議從文檔開始看起。

我們都知道高階函數(shù)是什么, 高階組件其實是差不多的用法，只不過傳入的參數(shù)變成了react組件，并返回一個新的組件.

A higher-order component is a function that takes a component and returns a new component.

形如:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

高階組件是react應(yīng)用中很重要的一部分，最大的特點就是重用組件邏輯。它并不是由React API定義出來的功能，而是由React的組合特性衍生出來的一種設(shè)計模式。如果你用過redux，那你就一定接觸過高階組件，因為react-redux中的connect就是一個高階組件。

原文https://github.com/sunyongjian/blog/issues/25
歡迎star
另外本次demo代碼都放在 https://github.com/sunyongjian/hoc-demo
clone下來跑一下加深理解

引入

先來一個最簡單的高階組件

import React, { Component } from 'react';
import simpleHoc from './simple-hoc';

class Usual extends Component {
  render() {
    console.log(this.props, 'props');
    return (
      <div>
        Usual
      </div>
    )
  }
}
export default simpleHoc(Usual);

import React, { Component } from 'react';

const simpleHoc = WrappedComponent => {
  console.log('simpleHoc');
  return class extends Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}
export default simpleHoc;

組件Usual通過simpleHoc的包裝，打了一個log... 那么形如simpleHoc就是一個高階組件了，通過接收一個組件class Usual，并返回一個組件class。其實我們可以看到，在這個函數(shù)里，我們可以做很多操作。而且return的組件同樣有自己的生命周期，function，另外，我們看到也可以把props傳給WrappedComponent(被包裝的組件)。高階組件的定義我都是用箭頭函數(shù)去寫的，如有不適請參照arrow function

裝飾器模式

高階組件可以看做是裝飾器模式(Decorator Pattern)在React的實現(xiàn)。即允許向一個現(xiàn)有的對象添加新的功能，同時又不改變其結(jié)構(gòu)，屬于包裝模式(Wrapper Pattern)的一種

ES7中添加了一個decorator的屬性，使用@符表示，可以更精簡的書寫。那上面的例子就可以改成：

import React, { Component } from 'react';
import simpleHoc from './simple-hoc';

@simpleHoc
export default class Usual extends Component {
  render() {
    return (
      <div>
        Usual
      </div>
    )
  }
}

是同樣的效果。
當(dāng)然兼容性是存在問題的，通常都是通過babel去編譯的。 babel提供了plugin，高階組件用的是類裝飾器，所以用transform-decorators-legacy babel

兩種形式

屬性代理

引入里我們寫的最簡單的形式，就是屬性代理(Props Proxy)的形式。通過hoc包裝wrappedComponent，也就是例子中的Usual，本來傳給Usual的props，都在hoc中接受到了，也就是props proxy。由此我們可以做一些操作

操作props
最直觀的就是接受到props，我們可以做任何讀取，編輯，刪除的很多自定義操作。包括hoc中定義的自定義事件，都可以通過props再傳下去。

import React, { Component } from 'react';

const propsProxyHoc = WrappedComponent => class extends Component {

  handleClick() {
    console.log('click');
  }

  render() {
    return (<WrappedComponent
      {...this.props}
      handleClick={this.handleClick}
    />);
  }
};
export default propsProxyHoc;

然后我們的Usual組件render的時候, console.log(this.props) 會得到handleClick.

refs獲取組件實例
當(dāng)我們包裝Usual的時候，想獲取到它的實例怎么辦，可以通過引用(ref),在Usual組件掛載的時候，會執(zhí)行ref的回調(diào)函數(shù)，在hoc中取到組件的實例。通過打印，可以看到它的props， state，都是可以取到的。

import React, { Component } from 'react';

const refHoc = WrappedComponent => class extends Component {

  componentDidMount() {
    console.log(this.instanceComponent, 'instanceComponent');
  }

  render() {
    return (<WrappedComponent
      {...this.props}
      ref={instanceComponent => this.instanceComponent = instanceComponent}
    />);
  }
};

export default refHoc;

抽離state

這里不是通過ref獲取state，而是通過 { props, 回調(diào)函數(shù) } 傳遞給wrappedComponent組件，通過回調(diào)函數(shù)獲取state。這里用的比較多的就是react處理表單的時候。通常react在處理表單的時候，一般使用的是受控組件（文檔），即把input都做成受控的，改變value的時候，用onChange事件同步到state中。當(dāng)然這種操作通過Container組件也可以做到，具體的區(qū)別放到后面去比較。看一下代碼就知道怎么回事了：

// 普通組件Login
import React, { Component } from 'react';
import formCreate from './form-create';

@formCreate
export default class Login extends Component {
  render() {
    return (
      <div>
        <div>
          <label id="username">
            賬戶
          </label>
          <input name="username" {...this.props.getField('username')}/>
        </div>
        <div>
          <label id="password">
            密碼
          </label>
          <input name="password" {...this.props.getField('password')}/>
        </div>
        <div onClick={this.props.handleSubmit}>提交</div>
        <div>other content</div>
      </div>
    )
  }
}

//HOC
import React, { Component } from 'react';

const formCreate = WrappedComponent => class extends Component {

  constructor() {
    super();
    this.state = {
      fields: {},
    }
  }
  onChange = key => e => {
    const { fields } = this.state;
    fields[key] = e.target.value;
    this.setState({
      fields,
    })
  }
  handleSubmit = () => {
    console.log(this.state.fields);
  }
  getField = fieldName => {
    return {
      onChange: this.onChange(fieldName),
    }
  }
  render() {
    const props = {
      ...this.props,
      handleSubmit: this.handleSubmit,
      getField: this.getField,
    }
    return (<WrappedComponent
      {...props}
    />);
  }
};
export default formCreate;

這里我們把state，onChange等方法都放到HOC里，其實是遵從的react組件的一種規(guī)范，子組件簡單，傻瓜，負(fù)責(zé)展示，邏輯與操作放到Container。比如說我們在HOC獲取到用戶名密碼之后，再去做其他操作，就方便多了，而state，處理函數(shù)放到Form組件里，只會讓Form更加笨重，承擔(dān)了本不屬于它的工作，這樣我們可能其他地方也需要用到這個組件，但是處理方式稍微不同，就很麻煩了。

反向繼承

反向繼承(Inheritance Inversion)，簡稱II，本來我是叫繼承反轉(zhuǎn)的...因為有個模式叫控制反轉(zhuǎn)嘛...
跟屬性代理的方式不同的是，II采用通過去繼承WrappedComponent，本來是一種嵌套的關(guān)系，結(jié)果II返回的組件卻繼承了WrappedComponent，這看起來是一種反轉(zhuǎn)的關(guān)系。
通過繼承WrappedComponent，除了一些靜態(tài)方法，包括生命周期，state，各種function，我們都可以得到。上栗子：

 // usual
import React, { Component } from 'react';
import iiHoc from './ii-hoc';

@iiHoc
export default class Usual extends Component {

  constructor() {
    super();
    this.state = {
      usual: 'usual',
    }
  }

  componentDidMount() {
    console.log('didMount')
  }

  render() {
    return (
      <div>
        Usual
      </div>
    )
  }
}

//IIHOC
import React from 'react';

const iiHoc = WrappedComponent => class extends WrappedComponent {
    render() {
      console.log(this.state, 'state');
      return super.render();
    }
}

export default iiHoc;

iiHoc return的組件通過繼承，擁有了Usual的生命周期及屬性，所以didMount會打印，state也通過constructor執(zhí)行，得到state.usual。
其實，你還可以通過II：

渲染劫持

這里HOC里定義的組件繼承了WrappedComponent的render(渲染)，我們可以以此進(jìn)行hijack(劫持)，也就是控制它的render函數(shù)。栗子：

  //hijack-hoc
  import React from 'react';

  const hijackRenderHoc = config => WrappedComponent => class extends WrappedComponent {
    render() {
      const { style = {} } = config;
      const elementsTree = super.render();
      console.log(elementsTree, 'elementsTree');
      if (config.type === 'add-style') {
        return <div style={{...style}}>
          {elementsTree}
        </div>;
      }
      return elementsTree;
    }
  };

  export default hijackRenderHoc;

  //usual
  @hijackRenderHoc({type: 'add-style', style: { color: 'red'}})
  class Usual extends Component {
    ...
  }

我這里通過二階函數(shù)，把config參數(shù)預(yù)制進(jìn)HOC，算是一種柯理化的思想。
栗子很簡單，這個hoc就是添加樣式的功能。但是它暴露出來的信息卻不少。首先我們可以通過config參數(shù)進(jìn)行邏輯判斷，有條件的渲染，當(dāng)然這個參數(shù)的作用很多，react-redux中的connect不就是傳入了props-key 嘛。再就是我們還可以拿到WrappedComponent的元素樹，可以進(jìn)行修改操作。最后就是我們通過div包裹，設(shè)置了style。但其實具體如何操作還是根據(jù)業(yè)務(wù)邏輯去處理的...

[圖片上傳中...(image-936804-1521617092866-1)]

我的應(yīng)用場景

通常我會通過高階組件去優(yōu)化之前老項目寫的不好的地方，比如兩個頁面UI幾乎一樣，功能幾乎相同，僅僅幾個操作不太一樣，卻寫了兩個耦合很多的頁面級組件。當(dāng)我去維護(hù)它的時候，由于它的耦合性過多，經(jīng)常會添加一個功能(這兩個組件都要添加)，我要去改完第一個的時候，還要改第二個。而且有時候由于我的記性不好，會忘掉第二個... 就會出現(xiàn)bug再返工。更重要的是由于個人比較懶，不想去重構(gòu)這部分的代碼，因為東西太多了，花費太多時間。所以加新功能的時候，我會寫一個高階組件，往HOC里添加方法，把那兩個組件包裝一下，也就是屬性代理。這樣新代碼就不會再出現(xiàn)耦合，舊的邏輯并不會改變，說不定哪天心情好就會抽離一部分功能到HOC里，直到理想的狀態(tài)。
另一種情況就是之前寫過一個組件A，做完上線，之后產(chǎn)品加了一個新需求，很奇怪要做的組件B跟A幾乎一模一樣，但稍微有區(qū)別。那我可能就通過II的方式去繼承之前的組件A，比如它在didMount去fetch請求，需要的數(shù)據(jù)是一樣的。不同的地方我就會放到HOC里，存儲新的state這樣，再通過劫持渲染，把不同的地方，添加的地方進(jìn)行處理。但其實這算Hack的一種方式，能快速解決問題，也反映了組件設(shè)計規(guī)劃之初有所不足(原因比較多)。

Container解決不了的時候甚至不太優(yōu)雅的時候。其實大部分時候包一層Container組件也能做到差不多的效果，比如操作props，渲染劫持。但其實還是有很大區(qū)別的。比如我們現(xiàn)在有兩個功能的container，添加樣式和添加處理函數(shù)的，對Usual進(jìn)行包裝。栗子：

//usual
class Usual extends Component {

  render() {
    console.log(this.props, 'props');
    return <div>
      Usual
    </div>
  }
};
export default Usual;
//console - Object {handleClick: function}  "props"

import React, { Component } from 'react';
import Usual from './usual';

class StyleContainer extends Component {

  render() {
    return (<div style={{ color: '#76d0a3' }}>
      <div>container</div>
      <Usual {...this.props} />
    </div>);
  }
}

export default StyleContainer;

import React, { Component } from 'react';
import StyleContainer from './container-add-style';

class FuncContainer extends Component {
  handleClick() {
    console.log('click');
  }

  render() {
    const props = {
      ...this.props,
      handleClick: this.handleClick,
    };
    return (<StyleContainer {...props} />);
  }
}

export default FuncContainer;

外層Container必須要引入內(nèi)層Container，進(jìn)行包裝，還有props的傳遞，同樣要注意包裝的順序。當(dāng)然你可以把所有的處理都放到一個Container里。那用HOC怎么處理呢，相信大家有清晰的答案了。

const addFunc = WrappedComponent => class extends Component {
  handleClick() {
    console.log('click');
  }

  render() {
    const props = {
      ...this.props,
      handleClick: this.handleClick,
    };
    return <WrappedComponent {...props} />;
  }
};

const addStyle = WrappedComponent => class extends Component {

  render() {
    return (<div style={{ color: '#76d0a3' }}>
      <WrappedComponent {...this.props} />
    </div>);
  }
};

const WrappenComponent = addStyle(addFunc(Usual));

class WrappedUsual extends Component {

  render() {
    console.log(this.props, 'props');
    return (<div>
      <WrappedComponent />
    </div>);
  }
}

顯然HOC是更優(yōu)雅一些的，每個HOC都定義自己獨有的處理邏輯，需要的時候只需要去包裝你的組件。相較于Container的方式，HOC耦合性更低，靈活性更高，可以自由組合，更適合應(yīng)付復(fù)雜的業(yè)務(wù)。當(dāng)然當(dāng)你的需求很簡單的時候，還是用Container去自由組合，應(yīng)用場景需要你清楚。

注意點(約束)

其實官網(wǎng)有很多，簡單介紹一下。

最重要的原則就是，注意高階組件不會修改子組件，也不拷貝子組件的行為。高階組件只是通過組合的方式將子組件包裝在容器組件中，是一個無副作用的純函數(shù)
要給hoc添加class名，便于debugger。我上面的好多栗子組件都沒寫class 名，請不要學(xué)我，因為我實在想不出叫什么名了... 當(dāng)我們在chrome里應(yīng)用React-Developer-Tools的時候，組件結(jié)構(gòu)可以一目了然，所以DisplayName最好還是加上。
[圖片上傳中...(image-1527ba-1521617092866-0)]
靜態(tài)方法要復(fù)制
無論P(yáng)P還是II的方式，WrappedComponent的靜態(tài)方法都不會復(fù)制，如果要用需要我們單獨復(fù)制。
refs不會傳遞。意思就是HOC里指定的ref，并不會傳遞到子組件，如果你要使用最好寫回調(diào)函數(shù)通過props傳下去。
不要在render方法內(nèi)部使用高階組件。簡單來說react的差分算法會去比較 NowElement === OldElement, 來決定要不要替換這個elementTree。也就是如果你每次返回的結(jié)果都不是一個引用，react以為發(fā)生了變化，去更替這個組件會導(dǎo)致之前組件的狀態(tài)丟失。
```
 // HOC不要放到render函數(shù)里面

 class WrappedUsual extends Component {

  render() {
    const WrappenComponent = addStyle(addFunc(Usual));

    console.log(this.props, 'props');
    return (<div>
      <WrappedComponent />
    </div>);
  }
}
```

使用compose組合HOC。函數(shù)式編程的套路... 例如應(yīng)用redux中的middleware以增強(qiáng)功能。redux-middleware解析

const addFuncHOC = ...
const addStyleHOC = ...//省略

const compose = (...funcs) => component => {
  if (funcs.lenght === 0) {
    return component;
  }
  const last = funcs[funcs.length - 1];
  return funcs.reduceRight((res, cur) => cur(res), last(component));
};

const WrappedComponent = compose(addFuncHOC, addStyleHOC)(Usual);

關(guān)于注意點，官網(wǎng)有所介紹，不再贅述。鏈接

總結(jié)

高階組件最大的好處就是解耦和靈活性，在react的開發(fā)中還是很有用的。
當(dāng)然這不可能是高階組件的全部用法。掌握了它的一些技巧，還有一些限制，你可以結(jié)合你的應(yīng)用場景，發(fā)散思維，嘗試一些不同的用法。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

react高階組件

react高階組件

React進(jìn)階之高階組件

前言

引入

裝飾器模式

兩種形式

屬性代理

反向繼承

渲染劫持

我的應(yīng)用場景

注意點(約束)

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

react高階組件

React進(jìn)階之高階組件

前言

引入

裝飾器模式

兩種形式

屬性代理

反向繼承

渲染劫持

我的應(yīng)用場景

注意點(約束)

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av