|
extends PureComponent { static defaultProps= { msgName:'请输入此事件函数名！' }; static propTypes={ msgName:PropTypes.string.isRequired, onPressCall:PropTypes.func, }; render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.onPressCall} > <View> <Text>{this.props.msgName}</Text> </View> </TouchableOpacity> </View> ); } onPressCall=()=>{ if(this.props.onPressCall){ this.props.onPressCall(); } }
}
2.【推荐】使用InteractionManager.runAfterInteractions，在动画或者某些特定场景中利用InteractionManager来选择性的渲染新场景所需的最小限度的内容； 使用场景类似于：
class ExpensiveScene extends React.Component { constructor(props, context) { super(props, context); this.state = {renderPlaceholderOnly: true}; } componentDidMount() { InteractionManager.runAfterInteractions(() => { this.setState({renderPlaceholderOnly: false}); }); } render() { if (this.state.renderPlaceholderOnly) { return this._renderPlaceholderView(); } return ( <View> <Text>Your full view goes here</Text> </View> ); } _renderPlaceholderView() { return ( <View> <Text>Loading...</Text> </View> ); } };
说明：更多使用于Navigator的页面跳转 3.【推荐】使用新版本组件替换旧办法组件； 例如：FlatList替换ListView，React Navigation替换Navigator等
4.【推荐】在使用Touchable系列组件时，进行setState或者大量调帧操作，请使用如下方式：
handleOnPress() { this.requestAnimationFrame(() => { //todo }); }
##五、安全规约
-
【强制】用户敏感数据禁止直接展示，必须对展示数据脱敏; 说明:查看个人手机号码会显示成:158****9119，隐藏中间 4 位，防止隐私泄露
-
【强制】请求传入任何参数必须做有效性验证;避免过度请求服务，造成服务器压力，或者双向校验； 如：验证手机号长度，是否是手机号等；
##六、其他
-
【推荐】开发工具使用WebStorm,安装ESLint插件进行代码检测，代码中不要出现使用ESLint检查出的错误; 说明：变量命名规范，使用var或者const错误
-
【推荐】在WebStorm中导入附件的hoop-settings.jar文件，进行代码格式化，提交的任何代码，都需要进行格式化。快捷键是option+command+L
|