ReactNative的ES6類寫法與未定義錯誤

ES6, 即ECMAScript6, JavaScript的新標準, 書寫更加規范, 代碼更加優雅. React Native推薦使用ES6的類寫法代替傳統的模塊, 即使用extends React.Component代替React.createClass. 本文介紹在ReactNative中ES6的寫法, 與傳統方法進行對比, 并解決未定義(undefined)錯誤.

在ES6中, 一定要注意this的使用, 否則undefined is not an object.

ES6

類的寫法

在ES6中, RN模塊使用class形式, 代替var形式, 使代碼更加規范.舊的寫法, 方法或變量使用逗號(",")間隔.

var Feed = React.createClass({});

ES6的寫法, 方法或變量結束使用分號(";").

class Feed extends Component {}

初始化狀態

在ES6中, 使用class類的形式, 因此初始化在構造器(constructor)中進進行. 舊的寫法, 使用getInitialState, 使用return返回狀態.

var Feed = React.createClass({
  getInitialState() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
      }),
      loaded: false,
      isAnimating: true,
      isRefreshing: false
    };
  }
});

ES6的寫法, 使用constructor構造器, 直接設置state狀態.

class Feed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
      }),
      loaded: false,
      isAnimating: true,
      isRefreshing: false
    }
  }
}

this綁定

在ES6中, 注意this的作用域, 由于使用類的寫法, 所以this僅僅指代當前的類, 對于內部類需要重新指定this, 指定位置可以任選. 舊的方式直接寫, 使用傳遞的props屬性.

var Feed = React.createClass({
  // 直接使用this.props屬性
  renderStories(story) {
    return (
      <Story story={story} navigator={this.props.navigator}></Story>
    );
  }

  render() {
    return (
      <ListView
        testID={"Feed Screen"}
        dataSource={this.state.dataSource}
        renderRow={this.renderStories}
        .../>
    )
  }
});

ES6的寫法. 在內部類中, 需要重新綁定this. 三種實現方式: 構造時, 調用時, 使用時.

class Feed extends Component {
  // 構造器直接綁定方法.
  constructor(props) {
    super(props);
    this.renderStories = this.renderStories.bind(this);
  }
}

class Feed extends Component {
  // 調用時, 綁定this.
  render() {
    return (
      <ListView
        testID={"Feed Screen"}
        dataSource={this.state.dataSource}
        renderRow={(story) => this.renderStories(story)}
        .../>
    )
  }
}

class Feed extends Component {
  // 使用時, 綁定this
  render() {
    return (
      <ListView
        testID={"Feed Screen"}
        dataSource={this.state.dataSource}
        renderRow={this.renderStories.bind(this)}
        .../>
    )
  }
}

注意綁定this失敗, 會發生未定義錯誤, 即undefined is not an object.

錯誤信息

崩潰

React Native推薦使用ES6的語法規范開發, 因此在開發中, 我們盡量使用ES6. 使用類的形式, 對于編輯器更加友好, 也更容易實現自動索引, 方便編程.

感謝我的朋友前端大神@左大師的指導!

另外參考

OK, that's all! Enjoy it!

文／SpikeKing（簡書作者）