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

資訊專欄INFORMATION COLUMN

React中的函數(shù)子組件(FaCC)和高階組件(HOC)

elliott_hu / 1325人閱讀

摘要：高階函數(shù)我們都用過，就是接受一個函數(shù)然后返回一個經(jīng)過封裝的函數(shù)而高階組件就是高階函數(shù)的概念應(yīng)用到高階組件上使用接受一個組件返回一個經(jīng)過包裝的新組件。靈活性在組合階段相對更為靈活，他并不規(guī)定被增強組件如何使用它傳遞下去的屬性。

在接觸過React項目后，大多數(shù)人都應(yīng)該已經(jīng)了解過或則用過了HOC(High-Order-Components)和FaCC(Functions as Child Components)，因為這兩個模式在大多數(shù)react的開源庫里都存在。比如react-router里面的withRouter 就是典型的高階組件，接受一個組件返回另外一個經(jīng)過增強后的組件。而react-motion中的Motion就是典型的FaCC的應(yīng)用。

HOC和FaCC兩者做的事也是非常相似的，都是類似設(shè)計模式里面的裝飾者模式。都是在原有的實例或則單元上進行功能的增強。

當(dāng)然不只是一些開源庫中會使用，在平常的代碼編寫中，也有很多地方是適用于使用HOC和FaCC去封裝一些邏輯。比如數(shù)據(jù)埋點，新特性的toggle，獲取轉(zhuǎn)換數(shù)據(jù)等。對于增強代碼可讀性和邏輯復(fù)用來說，非常有用的。

HOC

高階函數(shù)我們都用過，就是接受一個函數(shù)然后返回一個經(jīng)過封裝的函數(shù)：

const plus = first => second => (first + second)
plus(1)(2) // 3

而高階組件就是高階函數(shù)的概念應(yīng)用到高階組件上:

const withClassName = ComposedComponent => props => (
   
)

// 使用
const Header = text => (
{text}
)
const headerWitheClass = withClassName(Header)

接受一個組件返回一個經(jīng)過包裝的新組件。在我們經(jīng)常使用的withRouter就是在原有組件props上面在加上localtion等屬性。除了添加props以外高階組件還能做到：

在真正調(diào)用組件前后做一些事，比如埋點數(shù)據(jù)等

判斷組件是否該render，或則應(yīng)該render其他的東西，比如出錯之后render錯誤頁面

傳遞props并增加新的props

不render組件，轉(zhuǎn)而做一些其他的事情，比如渲染一個外部的dom

對于上面的前三點都比較好理解，解釋一下第4點。比如你在render了一個頁面之后，需要改變一下頁面的title.這是單頁應(yīng)用普遍存在的一個需求，通常你可以在具體router庫中使用hook去實現(xiàn)。當(dāng)然也可以通過HOC來實現(xiàn)：

const withTitleChange = ComposedComponent => {
  return class extends React.Component {
    componentDidMount () {
      const { title } = this.props
      document.title = title
    }
    render () {
      const props = this.props
      return 
    }
  }
}
FaCC

同樣FaCC也是用于增強原有組件能力的一種模式，其主要功能的實現(xiàn)在于react的props.children可以是任何東西，包括函數(shù)。我們可以拿上面class的例子用FaCC再實現(xiàn)一遍：

const ClassNameWrapper = ({ children }) => children("demo-class")

// 使用

const HeadWithClass = (props) => (
  
    {(class) => 
}
  
)

在FaCC中你也可以像HOC一樣在生命周期中做很多事對原有的組件進行封裝，基本上HOC能做的FaCC也都能做。我所在的項目之前都是大范圍的使用HOC，再經(jīng)過一番討論后，開始大范圍的轉(zhuǎn)變成FaCC。

區(qū)別

兩者都是用來增強原有組件的，具體該使用那種？那種是正確的模式？社區(qū)關(guān)于這一點也有很多討論，比如就有人說FaCC是反模式：Function as Child Components Are an Anti-Pattern。他給出的理由是children并不語義化，會造成困惑，然后他提出了Component Injection的模式，有興趣的同學(xué)可以讀一讀。

具體從幾個方面做一下對比：

組合階段

組合階段意思就是HOC，F(xiàn)aCC和要被增強的組件的組合時候。可以很明顯發(fā)現(xiàn)，F(xiàn)aCC對于前后組件對接依賴信息顯示的更多，相對而言更容易理解。而HOC，相互之間如何橋接，你必須得深入到HOC內(nèi)部讀代碼才可以知道這個HOC具體干了啥。

// HOC example
import View from "./View"

const DetailPage = withServerData(withNavigator(View))

// FaCC example

import View from "./View"

const DetailPage = props => (
  
    {
      data => (
        
          
        
      )
    }
  
)

如果在上面再增加2個HOC，上面組合的過程就變得十分難看。而FaCC相對而言，如何封裝，數(shù)據(jù)源來自那里，組件接受了那些數(shù)據(jù)都比較顯眼。

性能優(yōu)化

在HOC中我們能接受到宿主的prop，因為props是從HOC往下傳遞的，所以我們也有完整的生命周期，我們可以使用shouldComponentUpdate優(yōu)化。而FaCC則不然，無法在其內(nèi)部做比較props，除非在組合的時候外部在包一個組件才能進行比較props。

靈活性

FaCC 在組合階段相對HOC更為靈活，他并不規(guī)定被增強組件如何使用它傳遞下去的屬性。而HOC基本上在編寫完后就定死了。

另外，F(xiàn)aCC不會再去創(chuàng)建一個新的Component，而HOC會創(chuàng)建一個新的Component然后傳遞props下去。

總結(jié)

社區(qū)中很多開源庫已經(jīng)使用了兩種模式，也有很多的文章進行比較。也有很多激烈討論，當(dāng)然對于最后解決問題而言，兩種模式都有好處。出于不同的考慮，可能選擇不一樣。

參考文章：

http://rea.tech/functions-as-...

http://rea.tech/reactjs-real-...

https://medium.com/merrickchr...

http://www.ituring.com.cn/boo... 第四章

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

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

相關(guān)文章

  • [源碼解讀] react-redux

    摘要：本文并不逐行地對源碼進行細(xì)致分析，不如說是基于以下幾個問題，對源碼進行大致的掃覽。我們已經(jīng)知道，中，允許用戶注冊監(jiān)聽器，這些監(jiān)聽器會在每次執(zhí)行結(jié)束后遍歷觸發(fā)。省略一些無關(guān)代碼其中，是為了在嵌套的中嵌套執(zhí)行。 react-redux 源碼解讀 [TOC] 前置知識 閱讀本篇文章前，請先確認(rèn)你是否了解以下知識： react redux 高階組件 react diff 機制 其中高階組件...

    Olivia 評論0 收藏0

  • 使用Vue的HOC技術(shù)開發(fā)一個無限加載列表

    摘要：高階組件的概念，是里面經(jīng)常提到的，類似于高階函數(shù)。高階函數(shù)高階組件高階組件用是代碼復(fù)用的優(yōu)秀工具，主要在處理邏輯方面和普適性上，有著奇效。 前言 在web開發(fā)上，我們都對數(shù)據(jù)采用分頁加載的機制，一種變形就是在頁面采用循環(huán)加載的機制，拉到頁面最下方有個加載更多的按鈕。問題在于，當(dāng)不同的數(shù)據(jù)要展示時，就要寫很多這種列表，但是其中的邏輯都是相似的。 維護一組數(shù)據(jù) 加載更多數(shù)據(jù) 將數(shù)據(jù)用對應(yīng)...

    stefan 評論0 收藏0

  • 裝飾者模式的應(yīng)用：react高階組件和ES6 裝飾器

    摘要：裝飾者模式參與者裝飾者和被裝飾者共同的父類，是一個接口或者抽象類，用來定義基本行為定義具體對象，即被裝飾者抽象裝飾者，繼承自，從外類來擴展。三裝飾器高階組件可以看做是裝飾器模式在的實現(xiàn)。 一 裝飾者模式 優(yōu)先使用對象組合而不是類繼承。 --《設(shè)計模式》 1.什么是裝飾者模式 定義：動態(tài)的給對象添加一些額外的屬性或行為。相比于使用繼承，裝飾者模式更加靈活。 2.裝飾者模式參與者 Co...

    YuboonaZhang 評論0 收藏0

  • React系列之一起認(rèn)識Render Prop

    摘要：比如有個組件，它用來實時的獲取鼠標(biāo)的位置。命名空間，多個修改同一個導(dǎo)致的命名沖突。據(jù)說源碼里面為每個組件增加路由屬性就是通過該方法好了大功完成了，歡迎一起討論學(xué)習(xí)個人博客地址意卿 1.mixins 寫過react項目的應(yīng)該都碰到過，不同組件復(fù)用相同代碼的問題，在react早期使用React.createClass創(chuàng)建組件的時代，我們經(jīng)常使用的是mixins來實現(xiàn)代碼復(fù)用。比如有個組件A...

    LMou 評論0 收藏0

  • 從Preact了解一個類React的框架是怎么實現(xiàn)的(三): 組件

    摘要：組件渲染首先我們來了解組件返回的虛擬是怎么渲染為真實，來看一下的組件是如何構(gòu)造的可能我們會想當(dāng)然地認(rèn)為組件的構(gòu)造函數(shù)定義將會及其復(fù)雜，事實上恰恰相反，的組件定義代碼極少。 前言 　　首先歡迎大家關(guān)注我的掘金賬號和Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現(xiàn)，能堅持下去也是靠的是自己的熱情和大家的鼓勵?！　≈胺窒磉^幾篇關(guān)于React的文章: React技術(shù)內(nèi)幕: k...

    AlphaWatch 評論0 收藏0

發(fā)表評論

0條評論

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