在React-Native、React中 设计模式之模板方法模式的应用

大家在写Java、Android程序时，肯定都会用到设计模式之模板方法模式（一次性实现一个算法的不变的部分，并将可变的行为留给子类来实现）。
如：搭Android框架时，都会去写一个基类BaseActivity：

基类：
public abstract class BaseActivity extends AppCompatActivity {

 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initParam(getIntent().getExtras());
        initView();
        initData();
        initListener();
    }

protected abstract void initParam(Bundle param);

protected abstract void initView();

protected abstract void initData();

protected abstract void initListener();

}

-------------------------------------------------------------

子类：
public class ChildActivity extends BaseActivity {
   @Override
    protected void initParam(Bundle param) {
       ......
    }

    @Override
    protected void initView() {
            ......
    }

    @Override
    protected void initData() {
            ......
    }

    @Override
    protected void initListener() {
       ......
    }

}

到了后面写React-Native、React的代码时候，变成了通篇写Component。

import React,{ Component } from 'react';
import { View,Text,StyleSheet} from 'react-native'
class Demo extends Component {
      constructor(props) {
          super(props)
          this.state = {
              //定义state
          }
      }

    componentWillMount () {
    }
    componentDidMount () {
    }
    componentWillReceiveProps (nextProps) {
    }
    shouldComponentUpdate (nextProps,nextState) {
    }
    componentWillUpdate (nextProps,nextState) {
    }
    componentDidUpdate (prevProps,prevState) {
    }
    componentWillUnmount () {
    }

    render () {
        return (
             <View></view>
            )
    }

}

上面是很常见的一个具备生命周期的状态组件的写法，开发中，经常有一些重复性很高的代码，大家是不是码在每一个组件类中呢？比如说用InteractionManager.runAfterInteractions解决跳转页面转场动画卡顿的问题，可参考我前面写的文章React-Native Navigator 过渡动画卡顿的解决方案、InteractionManager.runAfterInteractions 手势左滑退出后 不再触发回调。
下面来看在React中如何去写基类:

组件基类：
import React, { Component } from 'react'
import InteractionManager from '../component/InteractionManager'
//自定义InteractionManager

export default class BaseComponent extends Component {
  constructor(props) {
    super(props)
    this.initProps(props)
    this.initState(props)
  }

  //处理页面传值
  initProps(props) {
  }

  //初始化state
  initState(props) {
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.doConnect()
    })
  }

 //固定网络请求方法
  doConnect() {
  }

}

-------------------------------------------------------------

组件子类：
import React from 'react'
import BaseComponent from './BaseComponent'

export default class ChildPage extends BaseComponent {
  constructor(props) {
    super(props)
  }

  initProps(props) {
    props.location.query.token
    ......
  }

  initState(props) {
    this.state = {
      msg: props.location.query.msg || 'xxxxxx'
      ......
    }
  }

  componentDidMount() {
    super.componentDidMount()
    ......
  }

   doConnect() {
     this._getData()
   }
}

看到这里，有么有发现前端的代码也可以变得清爽规范……