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

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

模塊定義

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

var Feed = React.createClass({});

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

class Feed extends Component {}

引入導出

引入

引入使用import Story from './Story.js';替換var Story = require('./Story');

導出

導出使用export default Feed;替換module.exports = Feed;

初始化狀態(tài)

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

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

ES6的寫法, 使用constructor構造器, 直接設置state狀態(tài).

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. 三種實現(xiàn)方式: 構造時, 調用時, 使用時.

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失敗, 會發(fā)生未定義錯誤, 即undefined is not an object.
錯誤信息

Alt text

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