HOC是react中對組件邏輯復用部分進行抽離的高級技術,但HOC並不是一個React API,它是一個方法,一個接收一個組件作為參數,返回一個增強的組件的方法。
相關教學推薦:React影片教學
HOC(High Order Component) 是react
中對元件邏輯復用部分進行抽離的高級技術,但HOC並不是一個React API
。它只是一種設計模式,類似於裝飾器模式。
具體而言,HOC就是一個函數,而函數接受一個元件作為參數,並傳回一個新元件。
從結果理論來說,HOC相當於 Vue
中的 mixins(混合)
。其實React
之前的策略也是採用mixins
,但是後來facebook
意識到mixins
產生的問題要比帶來的價值大,所以移除了mixins
。想了解更多
來看個範例
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 '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
當我們建構好一個HOC之後,我們使用的時候就簡單多了,還看最開始的例子,我們就不需要寫componentWillMount
了。
import React, { Component } from 'react' import withStorage from '@/utils/withStorage' class Page1 extends Component{ render() { return <h2>{this.props.data}</h2> } } export default withStorage(Page1)
很明顯,這是一個裝飾器模式,那麼就可以使用ES7形式
import React, { Component } from 'react' import withStorage from '@/utils/withStorage' @withStorage class Page1 extends Component{ render() { return <h2>{this.props.data}</h2> } } export default Page1
把被包裝的元件名稱也包到HOC的顯示名稱中。
2,時機
不要在元件的
render 方法中使用HOC,盡量也不要在元件的其他生命週期中使用HOC。因為呼叫HOC的時候每次都會回傳一個新的元件,於是每次render,前一次高階元件所建立的元件都會被卸載(unmount),然後重新掛載(mount)本次所建立的新元件,既影響效率又失去了組件及其子組件的狀態。
3,靜態方法
如果需要使用被包裝組件的靜態方法,那麼就需要手動複製這些靜態方法,因為HOC傳回的新組不包含被包裝組件的靜態方法。
4,ref
不會被傳遞到被包裝組件
更多程式相關知識,請造訪:程式設計入門
以上是react中什麼是hoc的詳細內容。更多資訊請關注PHP中文網其他相關文章!