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

資訊專欄INFORMATION COLUMN

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

elliott_hu / 1390人閱讀

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

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

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

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

HOC

高階函數(shù)我們都用過，就是接受一個(gè)函數(shù)然后返回一個(gè)經(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)

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

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

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

傳遞props并增加新的props

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

對(duì)于上面的前三點(diǎn)都比較好理解，解釋一下第4點(diǎn)。比如你在render了一個(gè)頁(yè)面之后，需要改變一下頁(yè)面的title.這是單頁(yè)應(yīng)用普遍存在的一個(gè)需求，通常你可以在具體router庫(kù)中使用hook去實(shí)現(xiàn)。當(dāng)然也可以通過HOC來實(shí)現(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也是用于增強(qiáng)原有組件能力的一種模式，其主要功能的實(shí)現(xiàn)在于react的props.children可以是任何東西，包括函數(shù)。我們可以拿上面class的例子用FaCC再實(shí)現(xiàn)一遍：

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

// 使用

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

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

區(qū)別

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

具體從幾個(gè)方面做一下對(duì)比：

組合階段

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

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

const DetailPage = withServerData(withNavigator(View))

// FaCC example

import View from "./View"

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

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

性能優(yōu)化

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

靈活性

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

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

總結(jié)

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

參考文章：

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

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

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

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

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

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

相關(guān)文章

  • [源碼解讀] react-redux

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<