首頁  >  文章  >  web前端  >  react中什麼是hoc

react中什麼是hoc

青灯夜游
青灯夜游原創
2020-12-18 17:11:538214瀏覽

HOC是react中對組件邏輯復用部分進行抽離的高級技術,但HOC並不是一個React API,它是一個方法,一個接收一個組件作為參數,返回一個增強的組件的方法。

react中什麼是hoc

相關教學推薦:React影片教學

What?什麼是HOC

HOC(High Order Component) 是react 中對元件邏輯復用部分進行抽離的高級技術,但HOC並不是一個React API 。它只是一種設計模式,類似於裝飾器模式。  

具體而言,HOC就是一個函數,而函數接受一個元件作為參數,並傳回一個新元件。 

從結果理論來說,HOC相當於 Vue 中的 mixins(混合) 。其實React 之前的策略也是採用mixins ,但是後來facebook 意識到mixins 產生的問題要比帶來的價值大,所以移除了mixins。想了解更多

Why ? 為什麼使用HOC

來看個範例

import React, { Component } from 'react'class Page1 extends Component{
  componentWillMount(){
    let data = localStorage.getItem('data')    this.setState({ data })
  }

  render() {    return (
      <h2>{this.state.data}</h2>
    )
  }
} 

export default Page1

這個例子中在元件掛載前需要在localStorage 中取出data 的值,但當其他元件也需要從localStorage 中取出相同的資料進行展示的話,每個元件都需要重新寫一遍componentWillMount 的程式碼,那就會顯得非常冗餘。那麼在Vue 中通常我們採用:

mixins: []

但是在React 中我們需要採用HOC模式咯

import React, { Component } from &#39;react&#39;

const withStorage = WrappedComponent => {
  return class extends Component{
    componentWillMount() {
      let data = localStorage.getItem(&#39;data&#39;)
      this.setState({ data })
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} /> 
    }
  }
}

export default withStorage

當我們建構好一個HOC之後,我們使用的時候就簡單多了,還看最開始的例子,我們就不需要寫componentWillMount 了。

import React, { Component } from &#39;react&#39;
import withStorage from &#39;@/utils/withStorage&#39;

class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}

export default withStorage(Page1)

很明顯,這是一個裝飾器模式,那麼就可以使用ES7形式

import React, { Component } from &#39;react&#39;
import withStorage from &#39;@/utils/withStorage&#39;

@withStorage
class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}

export default Page1

How ? 怎麼使用HOC

##使用場景

  • 操縱props

  • 透過ref 存取元件實例

  • 元件狀態提升

  • 用其他元素包裝元件

Tips 注意事項

1,命名

把被包裝的元件名稱也包到HOC的顯示名稱中。
2,時機
不要在元件的
render 方法中使用HOC,盡量也不要在元件的其他生命週期中使用HOC。因為呼叫HOC的時候每次都會回傳一個新的元件,於是每次render,前一次高階元件所建立的元件都會被卸載(unmount),然後重新掛載(mount)本次所建立的新元件,既影響效率又失去了組件及其子組件的狀態。 3,靜態方法
如果需要使用被包裝組件的靜態方法,那麼就需要手動複製這些靜態方法,因為HOC傳回的新組不包含被包裝組件的靜態方法。
4,ref
不會被傳遞到被包裝組件

HOC和Mixin的比較

react中什麼是hoc

##高階元件屬於函數式程式設計(functional programming)思想,而不會被包裹的元件時感知到高階元件的存在,而高階元件所傳回的元件會在原來的元件之上具有功能增強的效果。而Mixin這種混入的模式,會給組件不斷增加新的方法和屬性,組件本身不僅可以感知,甚至需要做相關的處理(例如命名衝突、狀態維護),一旦混入的模組變多時,整個組件就變的難以維護,也就是為什麼如此多的React函式庫都採用高階元件的方式來開發。

更多程式相關知識,請造訪:
程式設計入門

! !

以上是react中什麼是hoc的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn