亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

動手寫個React高階組件

xiaokai / 1327人閱讀

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

是什么

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

怎么用

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

// 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是一個函數(shù)，返回值是個react組件。這么聰明，好佩服自己啊。

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

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

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

// App.js

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

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

增加props屬性

好的啦，現(xiàn)在用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}
;
  }
}

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

多個高階組件

是的，寫完一個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;

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

帶參數(shù)

對了，hoc可以接收參數(shù)，比如這樣：

// 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接收到的參數(shù)又返還給了App組件，那現(xiàn)在瀏覽器輸出的就是：原罪2號。

不帶參數(shù)

現(xiàn)在，你可能有一個大膽的插法..哦不，想法，就是@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和帶參數(shù)的時候有什么區(qū)別。是的，少了一層回調(diào)。如果你的高階組件不需要帶參數(shù)，這樣寫也是很ok的。

操控原組件

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

// 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是上一個高階組件的函數(shù)中臨時生成的組件。而且在大多數(shù)情況下，你并不知道某個組件會被多少個高階裝飾！

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95638.html

相關(guān)文章

  • 學(xué)習(xí)es7的Decorator(順帶寫個react高階組件)

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

    xiyang 評論0 收藏0

  • 寫一本關(guān)于 React.js 的小書

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

    Scorpion 評論0 收藏0

  • React入門0x018: 高階函數(shù)組件(HOC)

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

    QLQ 評論0 收藏0

  • 手挽手帶你學(xué)React：四檔（上）一步一步學(xué)會react-redux （自己寫個Redux）

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

    sixgo 評論0 收藏0

  • 動手實現(xiàn) redux

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

    Barrior 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<