什么是高阶函数？
如果一个函数接受的参数为函数，或者返回值是一个新函数，则该函数就是高阶函数。
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'
}
})
高阶组件使用思考
- 不要改变原始组件的原型
- 必要的话可以传多个参数
