react中hoc有什么用

這篇文章給大家分享的是有關(guān)react中hoc有什么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

HOC是react中對(duì)組件邏輯復(fù)用部分進(jìn)行抽離的高級(jí)技術(shù)，但HOC并不是一個(gè)React API，它是一個(gè)方法，一個(gè)接收一個(gè)組件作為參數(shù)，返回一個(gè)增強(qiáng)的組件的方法。

What ？什么是HOC

HOC（High Order Component） 是 react 中對(duì)組件邏輯復(fù)用部分進(jìn)行抽離的高級(jí)技術(shù)，但HOC并不是一個(gè) React API 。 它只是一種設(shè)計(jì)模式，類(lèi)似于裝飾器模式。

具體而言，HOC就是一個(gè)函數(shù)，且該函數(shù)接受一個(gè)組件作為參數(shù)，并返回一個(gè)新組件。

從結(jié)果論來(lái)說(shuō)，HOC相當(dāng)于 Vue 中的 mixins(混合) 。其實(shí) React 之前的策略也是采用 mixins ，但是后來(lái) facebook 意識(shí)到 mixins 產(chǎn)生的問(wèn)題要比帶來(lái)的價(jià)值大，所以移除了 mixins。 想要了解更多

Why ? 為什么使用HOC

來(lái)看個(gè)例子

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

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

export default Page1

這個(gè)例子中在組件掛載前需要在 localStorage 中取出 data 的值，但當(dāng)其他組件也需要從 localStorage 中取出同樣的數(shù)據(jù)進(jìn)行展示的話(huà)，每個(gè)組件都需要重新寫(xiě)一遍 componentWillMount 的代碼，那就會(huì)顯得非常冗余。那么在 Vue 中通常我們采用:

mixins: []

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

import React, { Component } from 'react'

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

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

export default withStorage

當(dāng)我們構(gòu)建好一個(gè)HOC之后，我們使用的時(shí)候就簡(jiǎn)單多了，還看最開(kāi)始的例子，我們就不需要寫(xiě) componentWillMount 了。

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

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

export default withStorage(Page1)

很明顯，這是一個(gè)裝飾器模式，那么就可以使用ES7形式

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

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

export default Page1

How ? 怎么使用HOC

使用場(chǎng)景

• 操縱 props

• 通過(guò) ref 訪(fǎng)問(wèn)組件實(shí)例

• 組件狀態(tài)提升

• 用其他元素包裝組件

Tips 注意事項(xiàng)

1，命名
把被包裝的組件名稱(chēng)也包到HOC的顯示名稱(chēng)中。
2，時(shí)機(jī)
不要在組件的 render 方法中使用HOC，盡量也不要在組件的其他生命周期中使用HOC。因?yàn)檎{(diào)用HOC的時(shí)候每次都會(huì)返回一個(gè)新的組件，于是每次render，前一次高階組件創(chuàng)建的組件都會(huì)被卸載(unmount)，然后重新掛載(mount)本次創(chuàng)建的新組件，既影響效率又丟失了組件及其子組件的狀態(tài)。
3，靜態(tài)方法
如果需要使用被包裝組件的靜態(tài)方法，那么就需要手動(dòng)復(fù)制這些靜態(tài)方法，因?yàn)镠OC返回的新組建不包含被包裝組件的靜態(tài)方法。
4，ref
不會(huì)被傳遞給被包裝組件

HOC和Mixin的比較

高階組件屬于函數(shù)式編程(functional programming)思想，對(duì)于被包裹的組件時(shí)不會(huì)感知到高階組件的存在，而高階組件返回的組件會(huì)在原來(lái)的組件之上具有功能增強(qiáng)的效果。而Mixin這種混入的模式，會(huì)給組件不斷增加新的方法和屬性，組件本身不僅可以感知，甚至需要做相關(guān)的處理(例如命名沖突、狀態(tài)維護(hù))，一旦混入的模塊變多時(shí)，整個(gè)組件就變的難以維護(hù)，也就是為什么如此多的React庫(kù)都采用高階組件的方式進(jìn)行開(kāi)發(fā)。

感謝各位的閱讀！關(guān)于react中hoc有什么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！