组装者模式在React Native项目中的一个实战案例
Posted Lin Jin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了组装者模式在React Native项目中的一个实战案例相关的知识,希望对你有一定的参考价值。
前言
在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式。
什么是组装者模式?
就是在一个类中封装一些共有特性,然后使得在使用的组件中,可以动态的去添加一些属性或者行为,相比较于继承来说,组装者模式会更加的灵活。
实例演示
/**
* AboutCommon.js
* 组装者模式 模仿一些生命周期函数
*/
export default class AboutCommon {
constructor(props, updateState) {
this.props = props;
this.updateState = updateState;
this.backPress = new BackPressComponent({ backPress: () => this.onBackPress() });
}
componentDidMount() {
this.backPress.componentDidMount();
}
componentWillUnmount() {
this.backPress.componentWillUnmount();
}
/** 处理android中的物理返回键 */
onBackPress = () => {
NavigationUtil.goBack(this.props.navigation);
return true;
}
render() {
....do something
}
}
然后在AboutPage.js中使用它,通过在constuctor中实例化对象,成为当前组件中的一个成员,然后使用所需要的,以下只演示了一小部分功能,比如处理Android中的物理返回键功能
export default class AboutPage extends Component<Props> {
constructor(props) {
super(props);
this.params = this.props.navigation.state.params;
this.aboutCommon = new AboutCommon({
...this.params,
navigation: this.props.navigation,
flagAbout: FLAG_ABOUT.flag_about
}, data => this.setState({ ...data }))
this.state = {
data: config
}
}
componetDidMount() {
this.aboutCommon.componetDidMount();
}
componetWillUnmount() {
this.aboutCommon.componetWillUnmount();
}
}
当然,以上只是演示了以下基本的使用,在实际中,我们可以去做更多的处理。
以上是关于组装者模式在React Native项目中的一个实战案例的主要内容,如果未能解决你的问题,请参考以下文章
React native(android) assembleRelease 获取捆绑组装错误