Concise Object Methods. Arrow Functions

Concise Object Methods

• 讓你可以把":function"的部分移除
• 原本:

var Register = React.createClass({
  getDefaultProps: function () {
  },
  componentDidMount: function () {
  },
  shouldComponentUpdate: function () {
  },
  render: function () {
  }
})

• 修改後變得比較簡潔

var Register = React.createClass({
  getDefaultProps () {
  },
  componentDidMount () {
  },
  shouldComponentUpdate () {
  },
  render () {
  }
})

Arrow Functions

• 除了讓code比較簡潔外，還有一個很大的優點是可以共享parent scope的this
• 下面這個例子會有一個問題，在map內的function中，this.onAddFriend會無法辨別

var FriendsList = React.createClass({
  ...
  onAddFriend (friend) {
    this.setState({
      friends: this.state.friends.concat([friend])
    })
  }
  render () {
    return (
      <ul>
        {this.state.friends.map(function (friend) {
          return <FriendItem key={friend.id} handleAddFriend={this.onAddFriend}>{friend.name}</FriendItem>
        })} 
      <ul/>
    )
  }
});

• 除了可以在map後加上.bind(this)解決外，還可以將function改成arrow function來解決，因為arrow function部會生成新的context，所以map內外的this是相同的。

  render () {
    return (
      <ul>
        {this.state.friends.map((friend) => {
          return <FriendItem key={friend.id} handleAddFriend={this.onAddFriend}>{friend.name}></FriendItem>
        })}
      </ul>
    )
  }

• 此外，arrow function會假設去return arrow後面的東西，所以就不需要加上return敘述。

 render () {
    return (
      <ul>
        {this.state.friends.map((friend) => <FriendItem key={friend.id} handleAddFriend={this.onAddFriend}>{friend.name}</FriendItem>)}
      </ul>
    )
  }