学习笔记：React中高阶组件及其应用场景

是什么？

• 接收一个或多个组件作为输入
• 输出也是组件

实例

import React, { Component } from 'react'

export default (WrapperComponent) => {
    return class EnhancedComponent extends Component {
        // do something 在此处可以编写通用的业务逻辑
        // 如此可以实现传入不同的组件，但是完成了相同的部分业务逻辑，实现逻辑复用
        render() {
            return <WrapperComponent />
        }
    }
}

约定

• props保持一致
• 不要以任何方式改变传入的原始组件WrapperComponent
• 不要在render()方法中使用高阶组件

应用场景

多个模块都需要用到某一功能时，比如：

• 权限控制
• 日志记录
• 数据校验
• 异常处理
• 统计上报

// 普通方式
import React, { Component } from 'react'

class MyComponent extends Component {
    componentDidMount() {
        let data = localStorage.getItem('data')
        this.setState({ data })
    }
    render() {
        <div>
            <h2>{this.state.data}</h2>
        </div>
    }
}
export MyComponent

// 使用高阶组件的方式
import React, { Component } from 'react'

function WithPersistentData(WrapperComponent) {
    return class EnhancedComponent extends Component {
        // do something 在此处可以编写通用的业务逻辑
        componentDidMount() {
            let data = localStorage.getItem('data')
            this.setState({ data })
        }
        
        render() {
            return <WrapperComponent {...this.props} data={this.state.data} />
        }
    }
}

class MyComponent2 extends Component {
    render() {
        <div>
            <h2>{this.state.data}</h2>
        </div>
    }
}

class MyComponent3 extends Component {
    render() {
        <div>
            <h3>{this.state.data}</h3>
        </div>
    }
}

export const MyComponent2WithData = WithPersistentData(MyComponent2)

export const MyComponent3WithData = WithPersistentData(MyComponent3)