成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

動(dòng)手寫個(gè)React高階組件

xiaokai / 1276人閱讀

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

是什么

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

怎么用

為什么不先說怎么寫？恩，因?yàn)槟闫鋵?shí)已經(jīng)用過了，舉個(gè)例子：

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

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

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

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

// App.js

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

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

增加props屬性

好的啦，現(xiàn)在用myHoc給App組件加點(diǎn)料：

// 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)把我的名字 原罪 打印出來了。

多個(gè)高階組件

是的，寫完一個(gè)hoc之后，你就會(huì)有寫第二個(gè)的需求，那就一起用呢：

// App.js

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

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

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

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

自己體會(huì)，格式化一下吧：

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

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

export default hoc;

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

帶參數(shù)

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

// App.js

@myHoc("原罪2號(hào)")
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號(hào)。

不帶參數(shù)

現(xiàn)在，你可能有一個(gè)大膽的插法..哦不，想法，就是@myHoc后面可以不加括號(hào)嗎？是哦，看前面幾個(gè)案例，都是@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}
;
  }
}

細(xì)心的看官看一下myHoc.js和帶參數(shù)的時(shí)候有什么區(qū)別。是的，少了一層回調(diào)。如果你的高階組件不需要帶參數(shù)，這樣寫也是很ok的。

操控原組件

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

// myHoc.js

import React from "react";

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

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

總結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95638.html

相關(guān)文章

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

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

    xiyang 評(píng)論0 收藏0

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

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

    Scorpion 評(píng)論0 收藏0

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

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

    QLQ 評(píng)論0 收藏0

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

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

    sixgo 評(píng)論0 收藏0

  • 動(dòng)手實(shí)現(xiàn) redux

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

    Barrior 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<