组装者模式在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项目中的一个实战案例的主要内容,如果未能解决你的问题,请参考以下文章

建造者模式(Builder)——从组装电脑开始

React native(android) assembleRelease 获取捆绑组装错误

构造者模式

React Native:FlatList为所有项目而不是选定项目打开模式

建造者模式

设计模式之建造者模式