React Native =>(箭头函数)
我们经常会在代码中发现=>(箭头函数)，那么什么是箭头函数呢？
其实箭头函数类似iOS的block（回调），安卓的回调，JS的匿名函数（简化了函数定义）
简介：
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
所以你的浏览器首先要支持ES6的Arrow Function。
为什么叫Arrow Function？因为它的定义用的就是一个箭头：
x => x * x
上面的箭头函数相当于：
function (x) { return x * x; }
箭头函数相当于匿名函数，并且简化了函数定义。
箭头函数有两种格式：
A:只包含一个表达式，连{ ... }和return都省略掉了
var fn = x => x * x;
B:还有一种可以包含多条语句，这时候就不能省略{ ... }和return：
x => { if (x > 0) { return x * x; } else { return - x * x; } }
详情参考：https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080
关于this
普通函数中this对象的指向是可变的，所以在普通函数中this对象可能会存在null的情况，普通函数在调用后执行时使用到this时要注意bind(this)的绑定
箭头函数中this对象的指向是固定的，因为this指向定义时所在对象的作用域而不是使用时的
示例：
1、TouchableOpacity的onPress属性
<TouchableOpacity onPress={() => {
this.hotMenueAlert.setModalVisible(true)
}}>
<View style={style.item_center_right_bg}>
</View>
</TouchableOpacity>
2、组件的ref属性，通过这个属性我们可以将组件赋给成员变量来全局保存
<RoleHotModalMenu // 组件的ref属性，返回组件本身 ref={(c) => { if (c != null) { this.hotMenueAlert = c; } }}/>
3、props属性
定义：
export interface IProps extends IBasePageProp { onClickCancle?: (that: any) => void, onClickDone: (that: any, hotName: string) => void, data: string[], currentselhotName: string, }
赋值：
<RoleHotModalMenu data={['全部', '5', '4', '3', '2', '1']} // 自定义onClickDone属性赋值 onClickDone={(that: any, hotName: string) => { that.setModalVisible(false); this.setState({ hotname: hotName }, () => { this.chanceditailslist?.resetPageData(); }) }} currentselhotName={this.currentselhotname()} />
使用：
this.props.onClickDone(this, this.state.hotName);
4、成员变量
定义：
onPress!: () => void;// 无参无返回值 format: ((labels: string[]) => string) | undefined;// 参数数组，返回值是字符串 onOk: ((value: any) => void) | undefined; // 参数any、无返回值
赋值：
this.onPress = () => { this.setState({ data: datacity, }); }; this.onOk = value => { this.setState({ value }, () => { this.setState({ lables: this.lables }, () => { this.chanceditailslist?.resetPageData(); }) }); }; this.format = (labels: string[]) => { let kk = labels.join(' ') this.lables = labels if (kk && kk.length) { return kk } else { return '工作地' } };
使用：
<Picker data={datacity} cols={2} format={this.format} value={this.state.value} onOk={this.onOk} title={<Text style={style.topView_title}>选择工作地</Text>} okText={<Text style={style.topView_buttonText}>确定</Text>} dismissText={<Text style={style.topView_buttonText}>取消</Text>} >
备注：
示例代码，
1、涉及箭头函数、
2、UI组件做成员变量（通过组件的ref属性回调获取到组件对象然后赋值给成员变量）、
// 其实也是箭头函数
ref={(c) => { if (c != null) { this.hotMenueAlert = c; } }}
3、通过props访问成员变量、
4、本地json文件引入、
5、不论是props、state、还是成员变量都指向了property
state
// (property) IState.datatop: ResultList 读写（会触发UI刷新）
datatop: ResultList,
props
// (property) IProps.ce: number 只读
ce:number;
成员变量
// (property) default.orgId: number 读写 不会触发UI变化
orgId!: number
// 本地json文件 const datacity = require('./city.json') // 组件也可以这样写箭头函数 const CustomChildren = (props) => ( // 调用成员变量onPress，（之所以能通过props调用是因为成员变量属于默认属性（个人理解）(property) default.onPress: () => void），而直接写在props中的（通过this.props.ce访问）是只读的 <TouchableOpacity onPress={props.onPress}> <View style={style.item_center_left_bg}> {showtext(props.extra)} <Image style={style.item_right_img} source={require('../../image/pack_back.png')} /> </View> </TouchableOpacity> ); // 方法 function showtext(exstra: string) { if (exstra && exstra == '工作') { return ( <Text style={style.item_left_title} numberOfLines={1}>{exstra}</Text> ) } else { return ( <Text style={style.item_blue_title} numberOfLines={1}>{exstra}</Text> ) } } // 机会详情选择组织通知 const chancedetailsViewCallback = 'chancedetailsViewCallback' export interface IState { // (property) IState.datatop: ResultList 读写（会触发UI刷新） datatop: ResultList, data: [], value: string[], hotname: string, lables: string[] } export interface IProps extends IBasePageProp { // (property) IProps.ce: number 只读 ce:number; } interface INoticeInfo extends IBaseNativeNotice { InfoArray: addressBookItem[], } interface addressBookItem { oId: string, } export default class extends UtilsRootPage<IProps, IState> { // ------成员变量------ // 数据类型 // (property) default.orgId: number 读写 不会触发UI变化 orgId!: number lables!: string[] // 箭头函数（iOS的block、回调，安卓的回调）（箭头函数相当于匿名函数，并且简化了函数定义） // (property) default.onPress: () => void 读写 onPress!: () => void;// 无参无返回值 format: ((labels: string[]) => string) | undefined;// 参数数组，返回值是字符串 onOk: ((value: any) => void) | undefined; // 参数any、无返回值 // UI组件 chanceditailslist!: ComponentChanceDetialsList | null; private hotMenueAlert!: RoleHotModalMenu; // ------成员变量------ static navigationOptions: IAirNavigationOption = ({ navigation }) => { return { title: '详情', } } subPageLoad() { this.loadData() } subPageInit() { // ---成员变量赋值--- let orgId = parseInt(UtilsSuperGuide.getInstance().navigationParam(this, "orgId")); this.orgId = orgId this.onPress = () => { this.setState({ data: datacity, }); }; this.onOk = value => { this.setState({ value }, () => { this.setState({ lables: this.lables }, () => { this.chanceditailslist?.resetPageData(); }) }); }; this.format = (labels: string[]) => { let kk = labels.join(' ') this.lables = labels if (kk && kk.length) { return kk } else { return '工作地' } }; // ---成员变量赋值--- // state 初始化 this.state = { datatop: {} as ResultList, data: [], value: [], hotname: '角色热度', lables: [] } // 添加通知 UtilsSuperBridge.getInstance().noticeAddLisenter(chancedetailsViewCallback, this.addressBookCallBack.bind(this)); } subPageUnmount() { // 移除通知 UtilsSuperBridge.getInstance().noticeRemoveLisenter(chancedetailsViewCallback); } subPageRender() { return ( <View style={style.container}> {/* 弹出菜单 */} <RoleHotModalMenu // UI组件赋值：this.hotMenueAlert = c; ref={(c) => { if (c != null) { this.hotMenueAlert = c; } }} data={['全部', '5', '4', '3', '2', '1']} onClickDone={(that: any, hotName: string) => { that.setModalVisible(false); this.setState({ hotname: hotName }, () => { // 调用this.chanceditailslist this.chanceditailslist?.resetPageData(); }) }} currentselhotName={this.currentselhotname()} /> {/* 选择组件 */} <View style={style.item_center_bg}> {/* 地区选择 */} <Picker data={datacity} cols={2} format={this.format} value={this.state.value} onOk={this.onOk} title={<Text style={style.topView_title}>选择工作地</Text>} okText={<Text style={style.topView_buttonText}>确定</Text>} dismissText={<Text style={style.topView_buttonText}>取消</Text>} > <CustomChildren></CustomChildren> </Picker> {/* 角色热度选择 */} <TouchableOpacity onPress={() => { // 调用this.hotMenueAlert this.hotMenueAlert.setModalVisible(true) }}> <View style={style.item_center_right_bg}> <Text style={this.showstyle()} numberOfLines={1}>{this.state.hotname}</Text> <Image style={style.item_right_img} source={require('../../image/pack_back.png')} /> </View> </TouchableOpacity> </View> {/* 列表 */} <ComponentChanceDetialsList hotname={this.state.hotname} lables={this.state.lables} orgPath={this.state.datatop.orgPath} // 成员变量UI组件赋值：this.chanceditailslist = chanceditailslist ref={chanceditailslist => { this.chanceditailslist = chanceditailslist; }} /> </View> ); } private addressBookCallBack(info: INoticeInfo) { // UtilsSuperCommon.logWarn(info.InfoArray); let array: string[] = []; let infoArray = info.InfoArray for (const addressBookItem of infoArray) { if (addressBookItem.oId !== null) { array.push(addressBookItem.oId) } } if (array !== null) { this.orgId = parseInt(array[0]) // console.warn(this.orgId) this.lables = [] this.setState({ hotname: '全部' ,value: ['0'],lables: []}, () => { this.loadData() }) } } // 热度样式 private showstyle() { if (this.state.hotname == '热度') { return (style.item_left_title) } else { return (style.item_blue_title) } } // 详情信息 private loadData() { ServicesApiChance.chancedetails(this.orgId).then(res => { // console.warn(res); if (res.code == 200) { if (null != res.data) { this.setState({ datatop: res.data }, () => { this.chanceditailslist?.resetPageData() }) } } else { Toast.info(res.message, 1) } }) } } const style = StyleSheet.create({ container: { backgroundColor: ThemeAheadGlobal.colorBaseBackCommon, flex: 1 }, list: { flex: 1 }, item_center_bg: { backgroundColor: 'transparent', flexDirection: 'row', marginHorizontal: 10, marginBottom: 3, marginTop: 15, }, item_center_left_bg: { backgroundColor: '#FFFFFF', flexDirection: 'row', alignItems: 'center', borderRadius: 4, width: (DeviceHelp.getDeviceWidth() - 35) * 0.5 }, item_center_right_bg: { backgroundColor: '#FFFFFF', flexDirection: 'row', alignItems: 'center', borderRadius: 4, width: (DeviceHelp.getDeviceWidth() - 35) * 0.5, marginLeft: 15, }, item_right_img: { marginLeft: 10, marginRight: 15, width: 15, height: 15, }, item_left_title: { fontSize: DeviceHelp.fontSize(14), color: '#999999', marginLeft: 15, marginVertical: 10, flex: 2, }, item_blue_title: { fontSize: DeviceHelp.fontSize(14), color: '#3480FF', marginLeft: 15, marginVertical: 10, flex: 2, }, topView_buttonText: { fontSize: 16, color: ThemeAheadGlobal.colorBaseHighLight, }, topView_title: { fontSize: 16, color: ThemeAheadGlobal.colorBaseFontCommon, }, })
