javascript中装饰器的应用

[zp1112]

装饰器

打印console.log

调试的时候经常需要打印一些log来查看，这时候直接展开function，在return之前加console似乎比较繁琐，可以写一个装饰器log来装饰这个func，使之在return之前打印结果。

function log(target, name, descriptor) {
  var oldValue = descriptor.value;
  descriptor.value = function () {
    const res = oldValue.apply(null, arguments);
    console.log(`Calling "${name}" and return `, res);
    return res;
  };

  return descriptor;
}
class App extends React.Component {
  @log
  add() {
    return 3;
  }
  componentDidMount() {
    this.add()
  }
  render() {
    return 111;
  }
}

react中为每个路由页面添加title

类似于高阶组件的写法，装饰器需要传参数的时候再包裹一层函数

const setTitle = (title) => (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      document.title = title
    }
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}
@setTitle('Profile Page')
class App extends React.Component {
  render() {
    return 111;
  }
}

使用connect装饰器

redux提供connect可以使用装饰器写法

@connect(() => {
  return {
    count: state.count
  }
},
(dispatch) => {
  increcement: () => dispatch(increcementAction())
})
class App extends React.Component{
  ...
}