這里我把redner中原來(lái)渲染的span標(biāo)簽改為了div標(biāo)簽,雖然這是一個(gè)小小的變化但是請(qǐng)你腦補(bǔ)這是兩個(gè)渲染結(jié)果完全不同的組件好了.

這時(shí)候問(wèn)題以及十分明顯了組件A和B明顯有大量的重復(fù)邏輯但是借助于React組件卻無(wú)法將這公用的邏輯來(lái)抽離.

在一般的開(kāi)發(fā)中沒(méi)有這么完美重復(fù)的邏輯代碼,例如在生命周期函數(shù)中B組件可能多了幾個(gè)操作或者A組件數(shù)據(jù)源獲取的地址不同.
但是這里依然存在大量的可以被復(fù)用的邏輯.

這種函數(shù)的第一個(gè)參數(shù)接收一個(gè)React組件,然后返回這個(gè)組件:

function MyHoc(Wrap) {
  return class extends React.Component{
    render(){
      
    }
  }
}

就目前來(lái)說(shuō)這個(gè)函數(shù)沒(méi)有任何實(shí)際功能只是將原有的組件包裝返回而已.

但是如果我們將組件A和B傳入到這個(gè)函數(shù)中,而使用返回的函數(shù),我們可以得到了什么.
我們獲取了在原有的組件上的一層包裝,利用這層包裝我們可以把組件A和B的共同邏輯提取到這層包裝上.

我們來(lái)刪除組件A和B有關(guān)數(shù)據(jù)獲取以及修改的操作:

class A extends React.Component {

  componentDidMount(){
    // 這里執(zhí)行某些操作 假設(shè)和另外一個(gè)組件不同
  }

  componentWillUnmount(){
    // 這里執(zhí)行某些操作 假設(shè)和另外一個(gè)組件不同
  }

  render() {
    return (
      this.state.data.map(name => ({name}))
    )
  }
}

class B extends React.Component {

  componentDidMount(){
    // 這里執(zhí)行某些操作 假設(shè)和另外一個(gè)組件不同
  }

  componentWillUnmount(){
    // 這里執(zhí)行某些操作 假設(shè)和另外一個(gè)組件不同
  }

  render() {
    return (
      this.state.data.map(name => (
{name}
))
    )
  }
}

然后將在這層包裝上的獲取到的外部數(shù)據(jù)使用props來(lái)傳遞到原有的組件中:

function MyHoc(Wrap) {
  return class extends React.Component{

    constructor(props){

      super(props);

      this.state = {
        data:fakeData // 假設(shè)這樣就獲取到了數(shù)據(jù), 先不考慮其他情況
      }

    }

    render(){
      return  {/* 通過(guò) props 把獲取到的數(shù)據(jù)傳入 */}
    }
  }
}

在這里我們?cè)?HOC 返回的組件中獲取數(shù)據(jù), 然后把數(shù)據(jù)傳入到內(nèi)部的組件中, 那么數(shù)據(jù)獲取的這種功能就被多帶帶的拿了出來(lái).
這樣組件A和B只要關(guān)注自己的 props.data 就可以了完全不需要考慮數(shù)據(jù)獲取和自身的狀態(tài)修改.

但是我們注意到了組件A和B原有獲取數(shù)據(jù)源不同,我們?nèi)绾卧诎b函數(shù)中處理?

這點(diǎn)好解決,利用函數(shù)的參數(shù)差異來(lái)抹消掉返回的高階組件的差異.

既然A組件和B組件的數(shù)據(jù)源不同那么這個(gè)函數(shù)就另外接收一個(gè)數(shù)據(jù)源作為參數(shù)好了.
并且我們將之前通用的邏輯放到了這個(gè)內(nèi)部的組件上:

function MyHoc(Wrap,fakeData) { // 這次我們接收一個(gè)數(shù)據(jù)源
  return class extends React.Component{

    constructor(props){

      super(props);
      this.state = {
        data: fakeData.getData() // 模擬數(shù)據(jù)獲取
      }
      
    }

    handleDataChange = ()=>{
      this.setState({
        data:fakeData.getData()
      });
    }

    componentDidMount() {
      fakeData.addChangeListener(this.handleDataChange);
    }

    componentWillUnmount(){
      fakeData.removeChangeListener();
    }

    render(){
      
    }
  }
}

經(jīng)過(guò)上面的思考,實(shí)際上已經(jīng)完成了99%的工作了,接下來(lái)就是完成剩下的1%,把它們組合起來(lái).

偽代碼:

const
  FakeDataForA = FakeDataForAGenerator(),
  FakeDataForB = FakeDataForAGenerator(); // 兩個(gè)不同的數(shù)據(jù)源

function(Wrap,fakdData){ // 一個(gè) HOC 函數(shù)
  return class extends React.Components{};
}

class A {}; // 兩個(gè)不同的組件
class B {}; // 兩個(gè)不同的組件

const 
  AFromHoc = MyHoc(A,FakeDataForA),
  BFromHoc = MyHoc(B,FakeDataForB); // 分別把不同的數(shù)據(jù)源傳入, 模擬者兩個(gè)組件需要不同的數(shù)據(jù)源, 但是獲取數(shù)據(jù)邏輯一致

這個(gè)時(shí)候你就可以渲染自己的高階組件AFromHoc和BFromHoc了.
這兩個(gè)組件使用不同的數(shù)據(jù)源來(lái)獲取數(shù)據(jù),通用的部分已經(jīng)被抽離.

HOC函數(shù)需要像透明的一樣,經(jīng)過(guò)他的包裝產(chǎn)生的新的組件和傳入前沒(méi)有什么區(qū)別.
這樣做的目的在于,我們不需要考慮經(jīng)過(guò)HOC函數(shù)后的組件會(huì)產(chǎn)生什么變化而帶來(lái)額外的心智負(fù)擔(dān).
如果你的HOC函數(shù)對(duì)傳入的組件進(jìn)行了修改,那么套用這種HOC函數(shù)多次后返回的組件在使用的時(shí)候.
你不得不考慮這個(gè)組件帶來(lái)的一些非預(yù)期行為.

所以請(qǐng)不要將原本組件不需要的props傳入:

render() {
  // 過(guò)濾掉非此 HOC 額外的 props，且不要進(jìn)行透?jìng)?  const { extraProp, ...passThroughProps } = this.props;

  // 將 props 注入到被包裝的組件中。
  // 通常為 state 的值或者實(shí)例方法。
  const injectedProp = someStateOrInstanceMethod;

  // 將 props 傳遞給被包裝組件
  return (
    
  );
}

因?yàn)镠OC是一個(gè)返回組件的函數(shù),只要是函數(shù)可以做的事情HOC同樣可以做到.
利用這一點(diǎn),我們可以借用在使用React之前我們就已經(jīng)學(xué)會(huì)的一些東西.

例如定義一個(gè)高階函數(shù)用于返回一個(gè)高階組件:

function HighLevelHoc(content) {
  return function (Wrap, className) {
    return class extends React.Component {
      render() {
        return (
          {content}
        )
      }
    }
  }
}

class Test extends React.Component {
  render() {
    return (
      
{this.props.children || "hello world"}
    )
  }
}

const H1Test = HighLevelHoc("foobar")(Test, 1);


ReactDOM.render(, document.getElementById("root"));

或者干脆是一個(gè)不接收任何參數(shù)的函數(shù):

function DemoHoc(Wrap) { // 用于向 Wrap 傳入一個(gè)固定的字符串
  return class extends React.Component{
    render(){
      return (
        {"hello world"}
      )
    }
  } 
}

function Demo(props) {
  return (
    
{props.children}
  )
}

const App = DemoHoc(Demo);

ReactDOM.render(, document.getElementById("root"));

我們都知道 React 會(huì)調(diào)用 render 方法來(lái)渲染組件, 當(dāng)然 React 也會(huì)做一些額外的工作例如性能優(yōu)化.
在組件重新渲染的時(shí)候 React 會(huì)判斷當(dāng)前 render 返回的組件和未之前的組件是否相等 === 如果相等 React 會(huì)遞歸更新組件, 反之他會(huì)徹底的卸載之前的舊的版本來(lái)渲染當(dāng)前的組件.

HOC每次返回的內(nèi)容都是一個(gè)新的內(nèi)容:

function Hoc(){
  return {}
}
console.log( Hoc()===Hoc() ) // false

如果在 render 方法中使用:

render() {
  const DemoHoc = Hoc(MyComponent); // 每次調(diào)用 render 都會(huì)返回一個(gè)新的對(duì)象
  // 這將導(dǎo)致子樹(shù)每次渲染都會(huì)進(jìn)行卸載，和重新掛載的操作！
  return ;
}

React 的組件一般是繼承 React.Component 的子類(lèi).
不要忘記了一個(gè)類(lèi)上除了實(shí)例方法外還有靜態(tài)方法, 使用 HOC 我們對(duì)組件進(jìn)行了一層包裝會(huì)覆蓋掉原來(lái)的靜態(tài)方法:

class Demo extends React.Component{
  render(){
    return (
      
{this.props.children}
    )
  }
}

Demo.echo = function () {
  console.log("hello world");
}

Demo.echo();// 是可以調(diào)用的

// -------- 定一個(gè)類(lèi)提供一個(gè)靜態(tài)方法

function DemoHoc(Wrap) {
  return class extends React.Component{
    render(){
      return (
        {"hello world"}
      )
    }
  } 
}

const App = DemoHoc(Demo);

// ----- HOC包裝這個(gè)類(lèi)

App.echo(); // error 這個(gè)靜態(tài)方法不見(jiàn)了

解決方式

在 HOC 內(nèi)部直接將原來(lái)組件的靜態(tài)方法復(fù)制就可以了:

function DemoHoc(Wrap) {

  const myClass = class extends React.Component{
    render(){
      return (
        {"hello world"}
      )
    }
  }

  myClass.echo = Wrap.echo;

  return myClass;
}

不過(guò)這樣一來(lái) HOC 中就需要知道被復(fù)制的靜態(tài)方法名是什么, 結(jié)合之前提到的靈活使用 HOC 我們可以讓 HOC 接收靜態(tài)方法參數(shù)名稱(chēng):

function DemoHoc(Wrap,staticMethods=[]) { // 默認(rèn)空數(shù)組

  const myClass = class extends React.Component{
    render(){
      return (
        {"hello world"}
      )
    }
  }

  for (const methodName of staticMethods) { // 循環(huán)復(fù)制
    myClass[methodName] = Wrap[methodName];
  }

  return myClass;
}

// -----
const App = DemoHoc(Demo,["echo"]);

此外一般我們編寫(xiě)組件的時(shí)候都是一個(gè)文件對(duì)應(yīng)一個(gè)組件, 這時(shí)候我們可以把靜態(tài)方法導(dǎo)出.
HOC 不拷貝靜態(tài)方法, 而是需要這些靜態(tài)方法的組件直接引入就好了:

來(lái)自官方文檔

// 使用這種方式代替...
MyComponent.someFunction = someFunction;
export default MyComponent;

// ...多帶帶導(dǎo)出該方法...
export { someFunction };

// ...并在要使用的組件中，import 它們
import MyComponent, { someFunction } from "./MyComponent.js";

ref 作為組件上的特殊屬性, 無(wú)法像普通的 props 那樣被向下傳遞.

例如我們有一個(gè)組件, 我們想使用 ref 來(lái)引用這個(gè)組件并且試圖調(diào)用它的 echo 方法:

class Wraped extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      message:""
    }
  }

  echo(){
    this.setState({
      message:"hello world"
    });
  }

  render(){
    return 
{this.state.message}
  }
}

我們使用一個(gè) HOC 包裹它:

function ExampleHoc(Wrap) {
  return class extends React.Component{
    render(){
      return 
    }
  }
}

const Example = ExampleHoc(Wraped);
// 得到了一個(gè)高階組件

現(xiàn)在我們把這個(gè)組件放入到 APP 組件中進(jìn)行渲染, 并且使用 ref 來(lái)引用這個(gè)返回的組件, 并且試圖調(diào)用它的 echo 方法:

const ref = React.createRef();

class App extends React.Component {

  handleEcho = () => {
    ref.current.echo();
  }

  render() {
    return (
      

        
        echo {/* 點(diǎn)擊按鈕相當(dāng)于執(zhí)行echo */}
      
    )
  }
}

但是當(dāng)你點(diǎn)擊按鈕試圖觸發(fā)子組件的事件的時(shí)候它不會(huì)起作用, 系統(tǒng)報(bào)錯(cuò)沒(méi)有 echo 方法.

實(shí)際上 ref 被綁定到了 HOC 返回的那個(gè)匿名類(lèi)上, 想要綁定到內(nèi)部的組件中我們可以進(jìn)行 ref 透?jìng)?
默認(rèn)的情況下 ref 是無(wú)法被進(jìn)行向下傳遞的因?yàn)?ref 是特殊的屬性就和 key 一樣不會(huì)被添加到 props 中, 因此 React 提供了一個(gè) API 來(lái)實(shí)現(xiàn)透?jìng)?ref 的這種需求.

這個(gè) API 就是 React.forwardRef.

這個(gè)方法接收一個(gè)函數(shù)返回一個(gè)組件, 在這個(gè)含中它可以讀取到組件傳入的 ref , 某種意義上 React.forwardRef 也相當(dāng)于一個(gè)高階組件:

const ReturnedCompoent = React.forwardRef((props, ref) => {
  // 我們可以獲取到在props中無(wú)法獲取的 ref 屬性了
  return // 返回這個(gè)需要使用 ref 屬性的組件
});

我們把這個(gè) API 用在之前的 HOC 中:

function ExampleHoc(Wrap) {
  class Inner extends React.Component {
    render() {
      const { forwardedRef,...rest} = this.props;
      return  // 2. 我們接收到 props 中被改名的 ref 然后綁定到 ref 上
    }
  }
  return React.forwardRef((props,ref)=>{ // 1. 我們接收到 ref 然后給他改名成 forwardedRef 傳入到props中
    return 
  })
}

這個(gè)時(shí)候在調(diào)用 echo 就沒(méi)有問(wèn)題了:

handleEcho = () => {
  ref.current.echo();
}