什么是HOC?

HOC(Higher-order component)是一種React 的進階使用方法，只要還是為了便于組件的復用。強調一點，HOC本身并不是 React API, 它就是一個方法，一個接收一個組件作為參數，返回一個增強的組件的方法。

什么時候使用HOC

在組件掛載前需要在 localStorage 中取出 data 的值，但當其他組件也需要從 localStorage 中取出同樣的數據進行展示的話，每個組件都需要重新寫一遍 componentWillMount 的代碼，那就會顯得非常冗余。

概括的講，HOC能夠實現：

代碼復用，代碼模塊化

渲染劫持, 操作state

Props 增刪改

所以在 React 中我們需要采用HOC模式

import React, { Component } from 'react' import oldComponent from '../index'const newComponent = oldComponent => {return class extends Component{componentWillMount() {let data = localStorage.getItem('data')this.setState({ data })}render() {return <oldComponent data={this.state.data} {...this.props} /> }} }export default newComponent

總結

以上是生活随笔為你收集整理的React中自定义高阶组件的应用（HOC）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。