Question

我试图在github上理解此代码

他们在这里的程序员使用了类似的东西

 constructor(props) {
    super(props);
    this.actions = bindActionCreators(Actions, this.props.dispatch);
  }

问题1：在这里，this.actions = bindActionCreators(Actions, this.props.dispatch);对我来说没有意义

另外，这不是主要问题，但是从我从哪里学到了React-redux，我们就可以像这样连接组件

export default connect(mapStateToProps, 
  {fetchCoin, 
    updateCrypto, 
    CurrencyRate,
    CurrencyState
  })(cryptoTicker);

在上面的代码片段中，程序员做了类似的事情

@connect(state => {
  return {
    score: state.game.get("score"),
    result: state.game.get("result")
  };
})

问题2：**再次让我感到陌生（例如我有几个月的js使用经验，但这是我第一次遇到** @ ）因此，有人可以向我解释JS中的 @ 吗？

最后，他已经在类

的return语句之后声明了两个称为onclick的函数。

 _handleNewGame = () => {
    this.actions.initGame();
  }

  /**
   * Save the current game`s state.
   */
  _handleSaveGame = () => {
    this.actions.saveGame();
  }

现在，由于我对JS还是比较陌生，并且会做出反应，因此我对这部分有两个问题

问题3：我们可以在返回并渲染后在类内创建一个函数吗？如果是，那么在渲染所有其他函数都已声明的渲染之前创建一个函数通常不是一个好习惯吗？

Answer 1

对于问题1和问题2，您的'@connect'和'connect（mapStateToProps，...）（cryptoTicker）'语法是等效的。 @指示解析器我们正在为函数（connect（...）函数）使用装饰器，并输出相同的类（在本例中为Game），但具有附加功能。这称为HoC（高阶组件）设计模式，您可以在此处https://medium.com/@mappmechanic/react-utility-higher-order-components-as-decorators-tc39-stage-2-9e9f3a17688a

了解更多信息。

对于问题3，您是对的，最好的做法是将render函数保留在组件中的最后一个函数中。

bindActionCreators，React-Redux中的@connect并了解代码

1 个答案: