1.類的繼承（ES6）

??其實，在React-Native開發(fā)中時常會遇到一些方法重復的寫栓辜，想像Java一樣解耦出來呢刹悴，又覺得這些方法與類的關聯(lián)性又很高，不單獨提出來鹿榜，代碼有很冗余海雪。其實在ES6中的繼承跟Java中的繼承也大同小異，這給編程也帶來了很多便捷舱殿！

• 定義
  ??面向對象軟件技術當中的一個概念奥裸。如果一個類A“繼承自”另一個類B，就把這個A稱為“B的子類”怀薛，而把B稱為“A的父類”也可以稱“B是A的超類”刺彩。繼承可以使得子類別具有父類別的各種屬性和方法迷郑，而不需要再次編寫相同的代碼枝恋。在令子類繼承父類的同時，可以重新定義某些屬性嗡害，并重寫某些方法焚碌，即覆蓋父類的原有屬性和方法，使其獲得與父類不同的功能霸妹。另外十电，為子類追加新的屬性和方法也是常見的做法

• extends關鍵字
  ??在React-Native開發(fā)中采用extends關鍵字實現(xiàn)繼承，即 AClass extends BClass即可，例如：
  定義一個父類BaseClass

  export default class BaseClass{
  
  }
  

  定義一個子類ChildClass繼承父類

  export default class ChildClass extends BaseClass{
   
  }
  

  ??其實鹃骂，在React-Native中最常見的是Component繼承台盯，即 class BaseComponent extends Component，這種對于多個相同相似的界面可以節(jié)約很多時間畏线，例如：

  定義一個父類BaseComponent

  import { Component } from 'react'
  
  class BaseComponent extends Component {
  
  }
  
  export default BaseComponent
  

  定義一個子類ChildComponent

  import { BaseComponent } from '組件路徑'
  
  class ChildComponent extends BaseComponent {
  
  }
  
  export default BaseComponent
  

  如果你用到了constructor就必須寫super(),是用來初始化this的静盅，可以綁定事件到this上;
  如果你在constructor中要使用this.props,就必須給super加參數(shù)：super(props)；
  無論有沒有constructor寝殴，在render中this.props都是可以使用的蒿叠，這是React自動附帶的
  如果沒用到constructor,是可以不寫的；React會默認添加一個空的constructor蚣常。

• 屬性
  子類調用通過 this.屬性名 調用

  1. 屬性定義在類外是不可被繼承的市咽，例如：

  import { Component } from 'react'
  
  const a = "定義在這里不能被子類繼承"
  class BaseComponent extends Component {
  
  }
  export default BaseComponent
  

  2. 在類里直接定義屬性不可使用關鍵字聲明，例如：

  import { Component } from 'react'
  
  class BaseComponent extends Component {
      var a = 1 //這樣寫不可取
      let  b = 2 //這樣寫不可取
      c = 3 //這樣寫可被子類繼承抵蚊，通過this.c使用
  }
  export default BaseComponent
  

  3. 聲明在方法中的屬性不可通過this調用

  4. 在React-Native開發(fā)中施绎，一般都是定義在state中，即

      this.state  = {
          a:"屬性值"
      }
  

  ??調用的時候通過this.state.a調用泌射，這樣a的值一旦改變粘姜，調用的地方的值也會跟到改變，且定義在constructor中熔酷，參考如下：

  import { Component } from 'react'
  
  class BaseComponent extends Component {
      constructor(props){
          super(props)
          this.state = {
              a:"屬性值"
          }
      }
  }
  export default BaseComponent
  

  5. 在子類中如果也定義了state孤紧，子類的state將會覆蓋父類的state，如果既想要父類state中的屬性拒秘，也想定義子類的私有屬性号显，可使用...語法，即：

  在子類的constructor中聲明

  constructor(props){
      super(props)
      this.state = {
          ...this.state,//共用父類屬性
          b:"子類私有屬性"
      }
  }
  

• 方法

  1. 子類的方法可完全覆蓋父類的方法

  在父類定義一個方法叫 func：

  import { Component } from 'react'
  
  class BaseComponent extends Component {
      constructor(props){
          super(props)
          this.state = {
              text:"默認值"
          }
      }
  
      func(){
          this.setState({
              text:"父類修改func的值"
          })
      }
  }
  export default BaseComponent
  

  在子類也定義一個方法叫 func：

  import { BaseComponent } from '組件路徑'
  
  class ChildComponent extends BaseComponent {
      func(){
          this.setState({
              text:"子類修改func的值"
          })
      }
  }
  
  export default BaseComponent
  

  注：子類func方法將會完全覆蓋父類方法躺酒，父類中的方法不會被執(zhí)行押蚤，只會執(zhí)行子類的func方法
  

  顯示順序：默認值->子類修改func的值

  2. 保留父類方法中的邏輯，子類應寫為：

  import { BaseComponent } from '組件路徑'
  
  class ChildComponent extends BaseComponent {
      func(){
          super.func()
          this.setState({
              text:"子類修改func的值"
          })
      }
  }
  
  export default BaseComponent
  

  這樣既先調用父類的func方法羹应，在執(zhí)行子類func方法
  顯示順序：默認值->父類修改func的值->子類修改func的值

  3. 同名方法后者會覆蓋前者揽碘，即使傳遞的參數(shù)個數(shù)不同，這里與Java中的重載不同

  import { BaseComponent } from '組件路徑'
  
  class ChildComponent extends BaseComponent {
      func(){
          this.setState({
              text:"子類修改func的值"
          })
      }
    
      func(text) {
          this.setState({
               text: text
          })
      }
  }
  
  export default BaseComponent
  

  ??子類func()方法將會覆蓋父類中的func()方法园匹，子類的func(text)方法將會覆蓋子類的func()方法雳刺，即遵循同名方法后者覆蓋前者同名方法，不管是否有參數(shù)裸违！如果強行調用func()方法,也會去調用func(text)這個方法掖桦，參數(shù)text值為undefined

2.model的繼承

??model的繼承需要用到第三方，這里主要介紹dva-model-extend:https://github.com/dvajs/dva-model-extend,按照dva-model-extend文檔所說配置即可：

• 添加依賴
  npm install --save dva-model-extend
• API說明
  modelExtend(...models) => Model
  model.namespace:命名空間將由子類覆蓋父類命名空間
  model[state|subscriptions|effects|reducers]：將會被合并
  model.state：如果不是對象將會被子類覆蓋
• 使用舉例：
  父model代碼

  export default {
    namespace: 'parentModel',
    state: {
      parentText: '父參數(shù)',
      text: '一個父文本參數(shù)'
    },
    reducers: {
      updateState(state, { payload }) {
        return { ...state, ...payload }
      }
    },
    effects: {
      *test({ payload }, { call, put }) {
        console.log('父test方法')
      },
      *test1({ payload }, { call, put }) {
        console.log('父test1方法')
      }
    },
    subscriptions: {}
  }
  

  子model代碼

  import modelExtend from 'dva-model-extend'
  import parentModel from '父model的路徑'
  
  export default modelExtend(parentModel, {
    namespace: 'childModel',
    state: {
      childText: '子參數(shù)',
      text: '一個子文本參數(shù)'
    },
    reducers: {},
    effects: {
      *childTest({ payload }, { call, put }) {
        console.log('子childTest方法')
      },
      *test1({ payload }, { call, put }) {
        console.log('子test1方法')
      }
    },
    subscriptions: {
        
    }
  })
  

文中用到的第三方model繼承：https://github.com/dvajs/dva-model-extend
介紹一個特好用的react-native開發(fā)框架：https://github.com/nihgwu/react-native-dva-starter