React中的函數子組件和高階組件的詳解

這篇文章帶給大家的內容是關於React中的函數子組件和高階組件的詳解 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

在接觸過React專案後，大多數人都應該已經了解過或則用過了HOC(High-Order-Components)和FaCC(Functions as Child Components)，因為這兩個模式在大多數react的開源庫裡都存在。例如react-router裡面的withRouter 就是典型的高階元件，接受一個元件回傳另一個經過增強的元件。而react-motion中的Motion就是典型的FaCC的應用。

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

當然不只是一些開源函式庫中會使用，在平常的程式碼編寫中，也有很多地方是適用於使用HOC和FaCC去封裝一些邏輯。例如資料埋點，新特性的toggle，取得轉換資料等。對於增強程式碼可讀性和邏輯重複使用來說，非常有用的。

HOC

高階函數我們都用過，就是接受一個函數然後回傳一個經過封裝的函數：

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

而高階元件就是高階函數的概念應用到高階元件上:

const withClassName = ComposedComponent => props => (
   <ComposedComponent {...props} className=&#39;demo-class&#39; />
)

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

接受一個元件傳回一個經過包裝的新元件。在我們常使用的withRouter就是在原始元件props上面在加上localtion等屬性。除了加入props以外高階元件還能做到：

• 在真正呼叫元件前後做一些事，例如埋點資料等

• 判斷元件是否該render，或該render其他的東西，例如出錯之後render錯誤頁面

• 傳遞props並增加新的props

1. #對於上面的前三點都比較好理解，解釋一下第4點。例如你在render了一個頁面之後，需要改變一下頁面的title.這是單頁應用普遍存在的一個需求，通常你可以在具體router庫中使用hook去實現。當然也可以透過HOC來實現：

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

   登入後複製
   FaCC

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

// 使用

const HeadWithClass = (props) => (
  <ClassNameWrapper>
    {(class) => <header classNmae={class} ></header>}
  </ClassNameWrapper>
)

1. 兩者都是用來增強原有元件的，具體該使用那種？那種才是正確的模式？社群對這一點也有很多討論，例如就有人說FaCC是反模式：Function as Child Components Are an Anti-Pattern。他給出的理由是children並不語義化，會造成困惑，然後他提出了

   Component Injection

   的模式，有興趣的同學可以讀一讀。

1. 組合階段

// HOC example
import View from './View'

const DetailPage = withServerData(withNavigator(View))

// FaCC example

import View from './View'

const DetailPage = props => (
  <FetchServerData>
    {
      data => (
        <Navigator>
          <View data={data} {...props} />
        </Navigator>
      )
    }
  </FetchServerData>
)

靈活性

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

另外，FaCC不會再去建立一個新的Component，而HOC會建立一個新的Component然後傳遞props下去。

以上是React中的函數子組件和高階組件的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！