簡(jiǎn)單的講，Higher-Order Components就是一個(gè)函數(shù)，傳給它一個(gè)組件，它返回一個(gè)新的組件。

官網(wǎng)的定義：

組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級(jí)技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式。

具體而言，高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

react 高階組件的兩種方式: 屬性代理、反向繼承

a. 高階組件的反向繼承：通過(guò)操作super.render():

import React from 'react' import {render } from 'react-dom'//import App from './App4'class ComponentChild extends React.Component {constructor(props) {super(props)this.state = {num: 2019}}componentDidMount() {console.log("child component Did Mount")}clickComponent() {console.log("Component click")}render() {return ( <div > {this.state.num} </div>)} }let iihoc = (WrapComponet) => class extends WrapComponet {constructor(props) {super(props)this.state = {num: 2000}}componentDidMount() {console.log('iihoc componentDidMount')this.clickComponent()} render(){return (<div><div onClick={this.clickComponent}>iiHoc 點(diǎn)擊</div>{/* <div><WrapComponet /></div> */}//用的是父組件的state；<div>{super.render()}</div>//反向繼承，用的是子組件的state；</div>) } }var App = iihoc(ComponentChild)render( <App /> ,document.getElementById('root'))

b. 屬性繼承：

import React, { Component } from 'react';const loading = info => Wrapcomponent => {return class loadings extends Component {render() {return (<div><Wrapcomponent {...props} {...state} /></div>);}}; }; export default loading;

我們可以通過(guò)高階組件來(lái)實(shí)現(xiàn)一個(gè)組件底部的共享版權(quán)信息添加

目錄結(jié)構(gòu)：

copyright.jsx

import React from 'react' // 函數(shù)式組件內(nèi)部返回一個(gè)class類型組件 const withCopyright = (InnerComponent)=>{ //注意這里的形參需要首字母大寫，和普通組件一致return class newcom extends React.Component{render(){return(<><InnerComponent></InnerComponent><div>?底部共享版權(quán)信息</div></>)}} } export default withCopyright //將我們的HOC的函數(shù)式組件暴露出去

home.js

import React, { Component } from 'react' import Copyright from './copyright' //將hoc函數(shù)式組件引入class home extends Component { //定義一個(gè)類組件寫入內(nèi)容render() {return (<div>home頁(yè)面內(nèi)容</div>)} }export default Copyright(home) //用函數(shù)式組件包裹類組件后暴露導(dǎo)出

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import Mycomponent from './HOC/home.jsx' //引入homeReactDOM.render(<Mycomponent/>,document.getElementById('root') );

參考博客：

React 中高階組件(HOC)用法簡(jiǎn)述

react 高階組件的兩種方式: 屬性代理、反向繼承

總結(jié)

以上是生活随笔為你收集整理的react的hoc的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。