HOC高阶组件

什么是高阶函数？

如果一个函数接受的参数为函数，或者返回值是一个新函数，则该函数就是高阶函数。

setTimeout(() => {}, 1000);
array.filter((item, index) => item === target);
Promise...

什么是高阶组件？

如果一个组件的参数是组件，返回值是一个新组件，则该组件就是高阶组件。

高阶组件应用场景：解决了什么问题？

使用HOC高阶组件解决横切关注点问题，使得组件功能更加单一，组件逻辑服务组件UI，从而降低耦合性，增强组件的复用性。

高阶组件使用场景1

Hack渲染函数：首页添加按钮

image.d.ts

declare module '*.png'

withFloatButton.tsx

import { Image, StyleSheet, TouchableOpacity } from "react-native";
import add from '../assets/images/icon_add.png';

type IReactComponent = 
    React.ClassicComponentClass
    | React.ComponentClass
    | React.FunctionComponent
    | React.ForwardRefExoticComponent<any>;

export default <T extends IReactComponent> (OriginView: T): T =>  {
    const HOCView = (props: any) => {
        return (
            <>
                <OriginView {...props} />
                <TouchableOpacity 
                    style={styles.imgButton}
                    onPress={() => {
                        console.log('onPress...')
                    }}
                >
                    <Image
                        style={styles.img}
                        source={add}
                    >

                    </Image>
                </TouchableOpacity>
            </>
        );
    }
    return HOCView as T;
}

const styles = StyleSheet.create({
    imgButton: {
        position: 'absolute',
        right: 24,
        bottom: 60
    },
    img: {
        width: 50,
        height: 50,
        resizeMode: 'contain'
    }
})

InfoView.js

import React, { useEffect } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
} from 'react-native';

import icon_avatar from '../assets/images/default_avatar.png';
import withFloatButton from './withFloatButton';

export default withFloatButton(() => {

    const styles = darkStyles;
    return (
        <View style={styles.content}>
            <Image style={styles.img} source={icon_avatar} />
            <Text style={styles.txt}>个人信息介绍</Text>
            <View style={styles.infoLayout}>
                <Text style={styles.infoTxt}>
                    各位产品经理大家好，我是个人开发者张三，我学习RN两年半了，我喜欢安卓、RN、Flutter，Thank you!。
                </Text>
            </View>
        </View>
    );
});

const darkStyles = StyleSheet.create({
    content: {
        width: '100%',
        height: '100%',
        backgroundColor: '#353535',
        flexDirection: 'column',
        alignItems: 'center',
        paddingHorizontal: 16,
        paddingTop: 64,
    },
    img: {
        width: 96,
        height: 96,
        borderRadius: 48,
        borderWidth: 4,
        borderColor: '#ffffffE0',
    },
    txt: {
        fontSize: 24,
        color: 'white',
        fontWeight: 'bold',
        marginTop: 32,
    },
    infoLayout: {
        width: '90%',
        padding: 16,
        backgroundColor: '#808080',
        borderRadius: 12,
        marginTop: 24,
    },
    infoTxt: {
        fontSize: 16,
        color: 'white',
    },
});

高阶组件使用场景2

Hack生命周期：首页上报设备信息

import { Image, StyleSheet, TouchableOpacity } from "react-native";
import add from '../assets/images/icon_add.png';
import { useEffect } from "react";

type IReactComponent = 
    React.ClassicComponentClass
    | React.ComponentClass
    | React.FunctionComponent
    | React.ForwardRefExoticComponent<any>;

export default <T extends IReactComponent> (OriginView: T): T =>  {
    const HOCView = (props: any) => {
        useEffect(() => {
            reportDeviceInfo();
        }, []);

        const reportDeviceInfo = () => {
            const DeviceInfo = {
                id: 1,
                model: '',
                storage: '',
            }
            //模拟上报
        }

        return (
            <>
                <OriginView {...props} />
                <TouchableOpacity 
                    style={styles.imgButton}
                    onPress={() => {
                        console.log('onPress...')
                    }}
                >
                    <Image
                        style={styles.img}
                        source={add}
                    >

                    </Image>
                </TouchableOpacity>
            </>
        );
    }
    return HOCView as T;
}

const styles = StyleSheet.create({
    imgButton: {
        position: 'absolute',
        right: 24,
        bottom: 60
    },
    img: {
        width: 50,
        height: 50,
        resizeMode: 'contain'
    }
})

高阶组件使用思考

1. 不要改变原始组件的原型
2. 必要的话可以传多个参数