10.Decorator

1. log

// 例子 10-1
 
class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

log 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

2. autobind

// 例子 10-2
 
class Toggle extends React.Component {
 
  @autobind
  handleClick() {
    console.log(this)
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        button
      </button>
    );
  }
}

autobind 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

3. debounce

// 例子 10-3
 
class Toggle extends React.Component {
 
  @debounce(500, true)
  handleClick() {
    console.log('toggle')
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        button
      </button>
    );
  }
}

debounce 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

4. React 与 Redux

// 例子 10-4
 
// good
class MyReactComponent extends React.Component {}
 
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
 
// better
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};