高階組件HOC

• 一、高階組件HOC
• • 1.高階組件
  • 2、屬性傳遞
  • 3、使用屬性傳遞
  • 4、注意

一、高階組件HOC

HOF：Higher-Order Function, 高階函數，以函數作為參數，并返回一個函數，例如（compose、bind）
HOC: Higher-Order Component, 高階組件，以組件作為參數，并返回一個組件。
如下例代碼B，返回一個新的組件，所以B就是一個高階組件。

import React from 'react'export default function withTest(comp) {return class extends React.Component{} } function A(){return <h1>test</h1> } const B = withTest(A);

1.高階組件

如果我們要設計一個日志記錄組件，那么想想怎樣能讓這個日志記錄組件復用性更高，后期更好維護呢？將整個日志記錄組件封裝成一個組件？

//withLog.js import React from 'react'export default function withLog(Comp) {// 使用傳入的記錄器組件進行記錄return class LogWarpper extends React.Component {// 取個名字方便后期調試componentDidMount() {console.log(`日志：組件${Comp.name}被創建了！${Date.now()}`);}componentWillUnmount() {console.log(`日志：組件${Comp.name}被銷毀了！${Date.now()}`);}render(){return <Comp />}} }

如下兩個記錄器A、B，如果想實現兩個記錄器，那么難以避免造成代碼重復，索性交給另一個組件專門去實現如何進行記錄，然后調用A，B即可。

//Comp.js import React from 'react' export class A extends React.Component{// A記錄器render() {return <h1>A</h1>} } export class B extends React.Component{// B記錄器render() {return <h1>B</h1>} } import React, { Component } from 'react' import {A,B} from './components/Comps' import withLog from './HOC/withLog'const ALog = withLog(A); const BLog = withLog(B); export default class Input extends Component {render() {return (<div><ALog /><BLog /></div>)} }

這里就很明顯了，A，B只會記錄事件，如何記錄是LogWarpper的事；兩個組件分開也能實現一些功能，組合起來則能產生1+1>2的效果。

2、屬性傳遞

組件通過嵌套，那么屬性當然也需要我們自己手動一層一層向下傳遞。

//withLog.js import React from 'react'export default function withLog(Comp) {return class LogWarpper extends React.Component {componentDidMount() {console.log(`日志：組件${Comp.name}被創建了！${Date.now()}`);}componentWillUnmount() {console.log(`日志：組件${Comp.name}被銷毀了！${Date.now()}`);}render(){return <Comp {...this.props} />}} } //Comps.js import React from 'react' export class A extends React.Component{render() {return <h1>A:{this.props.a}</h1>} } export class B extends React.Component{render() {return <h1>B:{this.props.b}</h1>} } import React, { Component } from 'react' import {A,B} from './components/Comps' import withLog from './HOC/withLog'const ALog = withLog(A); const BLog = withLog(B); export default class Input extends Component {render() {return (<div><ALog a={'a'} /><BLog b={'b'} /></div>)} }

3、使用屬性傳遞

模擬一個登錄系統，只有當提取到登錄信息isLogin后才能顯示后續頁面。

//withLogin import React from 'react'export default function withLogin(Comp) {return function LoginWrapper(props) {if(props.isLogin){return <Comp {...props} />}return null;} }

Comp并未有任何改變

//Comp.js import React from 'react' export class A extends React.Component{render() {return <h1>A:{this.props.a}</h1>} } export class B extends React.Component{render() {return <h1>B:{this.props.b}</h1>} }

如果不傳isLogin

import React, { Component } from 'react' import {A,B} from './components/Comps' import withLogin from './HOC/withLogin'const ALog = withLogin(A); const BLog = withLogin(B); export default class Input extends Component {render() {return (<div><ALog a={'a'} /><BLog b={'b'} /></div>)} }

傳入isLogin后

是不是發現高階組件的用處大大的了？其用處當然不止如此，還可以配合我們實現各種復雜的邏輯。

4、注意

如果我們render函數內去包裝一個高階組件呢？

import React, { Component } from 'react' import {A,B} from './components/Comps' import withLog from './HOC/withLog'export default class Input extends Component {render() {const ALog = withLog(A);const BLog = withLog(B); return (<div><ALog isLogin a={'a'} /><BLog isLogin b={'b'} /><button onClick={()=>{this.setState({})}}>點擊</button></div>)} }

一旦我們對狀態進行操作時，你會發現，組件并沒有進行重用單獨刷新數據，而是整個組件都銷毀沖建了。這會對性能造成影響。
此外不要在高階組件內部更改傳入的組件

博主開始運營自己的公眾號啦，感興趣的可以關注“飛羽逐星”微信公眾號哦，拿起手機就能閱讀感興趣的博客啦！

總結

以上是生活随笔為你收集整理的react学习—高阶组件HOC的全部內容，希望文章能夠幫你解決所遇到的問題。

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