動手寫個React高階組件

xiaokai 發布于2019-08-22 18:14 / 1270人閱讀

摘要：作用是給組件增減屬性。如果你的高階組件不需要帶參數，這樣寫也是很的。那么需要建立一個引用可以對被裝飾的組件做羞羞的事情了，注意在多個高階組件裝飾同一個組件的情況下，此法并不奏效。你拿到的是上一個高階組件的函數中臨時生成的組件。

是什么

簡稱HOC，全稱 High Order Component。作用是給react組件增減props屬性。

怎么用

為什么不先說怎么寫？恩，因為你其實已經用過了，舉個例子：

// App.js

import {connect} from "react-redux";

class App extends React.Component {
  render() {}
}

export default connect()(App);

熟悉不？redux的連接器。不過筆者有潔癖，喜歡用裝飾器：

// App.js

import {connect} from "react-redux";

@connect()
export class App extends React.Component {
  render() {}
}

開始寫

從connect()()可以看出，connect是一個函數，返回值是個react組件。這么聰明，好佩服自己啊。

雛形

// myHoc.js
import React from "react";

export const myHoc = () => {
  return (Wrapped) => {
    class Hoc extends React.Component {
      render() {
        return ;
      }
    }
    
    return Hoc;
  };
};

是的，高階組件的雛形，就是函數里隱藏了一個react組件，而參數Wrapped是什么？就是下面被裝飾的組件：

// App.js

@myHoc()
export class App extends React.Component {
  render() {}
}

恩恩，表現形式和redux的connect一模一樣。
所以用了高階組件后，export出去的不再是你自己寫的App(Class)，而是最后一個高階。

增加props屬性

好的啦，現在用myHoc給App組件加點料：

// myHoc.js
export const myHoc = () => {
  return (Wrapped) => {
    class Hoc extends React.Component {
      render() {
        return ;
      }
    }
    
    return Hoc;
  };
};

// App.js

@myHoc()
export class App extends React.Component {
  render() {
    return {this.props.whoAmI};
  }
}

放心，此刻瀏覽器里已經把我的名字原罪打印出來了。

多個高階組件

是的，寫完一個hoc之后，你就會有寫第二個的需求，那就一起用呢：

// App.js

@myHoc()
@yourHoc()
@hisHoc()
@herHoc()
export class App extends React.Component {
  render() {
    return {this.props.whoAmI};
  }
}

這就是筆者為啥要用裝飾器的原因，簡潔，看起來舒服，寫起來快，我們看一下另一種寫法：

class App extends React.Component {
  render() {}
}

export default myHoc()(yourHoc()(hisHoc()(herHoc()(App))));

自己體會，格式化一下吧：

class App extends React.Component {
  render() {}
}

let hoc;
hoc = herHoc()(App);
hoc = hisHoc()(hoc);
hoc = yourHoc()(hoc);
hoc = myHoc()(hoc);

export default hoc;

寫得累不？來，給你條毛巾擦擦汗

帶參數

對了，hoc可以接收參數，比如這樣：

// App.js

@myHoc("原罪2號")
export class App extends React.Component {
  render() {
    return {this.props.whoAmI};
  }
}

那高階組件怎么接呢？

// myHoc.js

export const myHoc = (name) => {
  return (Wrapped) => {
    class Hoc extends React.Component {
      render() {
        return ;
      }
    }
    
    return Hoc;
  };
};

我把hoc接收到的參數又返還給了App組件，那現在瀏覽器輸出的就是：原罪2號。

不帶參數

現在，你可能有一個大膽的插法..哦不，想法，就是@myHoc后面可以不加括號嗎？是哦，看前面幾個案例，都是@myHoc()。好的，看我的：

// myHoc.js

export const myHoc = (Wrapped) => {
  class Hoc extends React.Component {
    render() {
      return ;
    }
  }
    
  return Hoc;
};

// App.js

@myHoc
export class App extends React.Component {
  render() {
    return {this.props.whoAmI};
  }
}

細心的看官看一下myHoc.js和帶參數的時候有什么區別。是的，少了一層回調。如果你的高階組件不需要帶參數，這樣寫也是很ok的。

操控原組件

你可能需要拿被裝飾的組件的state數據或者執行它的方法。那么需要建立一個引用：

// myHoc.js

import React from "react";

export const myHoc = () => {
  return (Wrapped) => {
    class Hoc extends React.Component {
      appRef = null;
      
      componentDidMount() {
        // 可以對被myHoc裝飾的組件做羞羞的事情了，:)
        console.log(this.appRef);
      }
    
      render() {
        return  {this.appRef = app}} >;
      }
    }
    
    return Hoc;
  };
};

注意： 在多個高階組件裝飾同一個組件的情況下，此法并不奏效。你拿到的ref是上一個高階組件的函數中臨時生成的組件。而且在大多數情況下，你并不知道某個組件會被多少個高階裝飾！

總結

當項目中多處用到某個邏輯方法，但是這個邏輯不能放到util里的時候，HOC適合你。一個HOC最好只做一件事，這樣維護方便

云服務器 GPU云服務器高階組件自己動手寫爬蟲動手學習深度學習動手學深度學習

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

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

學習es7的Decorator(順帶寫個react高階組件)

摘要：為了代碼進一步解耦，可以考慮使用高階組件這種模式。開源的高階組件使用提供了一系列使用的高階組件，可以增強組件的行為，可以利用此庫學習高階組件的寫法。通過使用此庫提供的高階組件，可以方便地讓列表元素可拖動。 1. Decorator基本知識在很多框架和庫中看到它的身影，尤其是React和Redux，還有mobx中，那什么是裝飾器呢。修飾器（Decorator）是一個函數，用來修改類的...

xiyang 2019-08-23 12:32 評論0 收藏0
寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React入門0x018: 高階函數組件(HOC)

摘要：總結其實，這個和的思想有很大的淵源，不推薦繼承，而是推薦組合，而就是其中的典范。比如我們寫了兩個個高階組件，一個是，一個是，組件就可以隨意的在和之間隨意切換，而不需要改動組件原有代碼。 0x000 概述高階函數組件...還是一個函數，和函數組件不同的是他返回了一個完整的組件...他返回了一個class！！！ 0x001 直接上栗子照常，先寫個App組件，外部傳入一個theme ...

QLQ 2019-08-23 13:52 評論0 收藏0
手挽手帶你學React：四檔（上）一步一步學會react-redux （自己寫個Redux）

手挽手帶你學React入門四檔,用人話教你react-redux，理解redux架構，以及運用在react中。學完這一章，你就可以開始自己的react項目了。之前在思否看到過某個大神的redux搭建忘記了大神的名字這里只記得內容了憑借記憶和當時的學習路線寫下本文隔空感謝本人學習react-redux的時候遇到了很多坎，特別是不理解為什么這么用，這是什么東西，用來做什么。加上各種名詞讓人...

sixgo 2019-08-23 15:11 評論0 收藏0
動手實現 redux

摘要：動手實現實現這個模塊直接創建的函數考慮到要暴露出去的三個函數我們用函數內部的變量來存儲我們的數據時候直接返回當前的值就可以了同樣用內部變量來存儲訂閱者訂閱者則由函數添加返回取消訂閱的函數。則根據返回新的同時通知訂閱者執行相關邏輯。文章地址實例回顧 showImg(https://segmentfault.com/img/bVXtft?w=640&h=320); 假如按鈕和界面不在同...

Barrior 2019-08-21 17:18 評論0 收藏0