Question

我目前正在学习React，我在React的入门指南中遇到了一些看起来很奇怪的东西。

我正在阅读this section。这个代码示例是：https://codepen.io/gaearon/pen/QKzAgB?editors=0011

它展示了条件渲染，但这不是我的问题。当他们传递HandleLogout / LoginEvent时，他们只是传递this.HandleLoginEvent，没有绑定或使用箭头函数，但这段代码完美无缺，它是如何工作的？

我正在谈论的代码是：

let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

在previous section of the guides中，他们明确声明你必须使用某种方法绑定“this”，以便在从子组件调用时不要定义“this”，这是有道理的。

然而，这里“这个”在某种程度上是神奇的束缚，它是如何完成的？

谢谢，Avi。

编辑：正如Ori所指出的，有一个我错过的绑定电话，问题解决了：）

Answer 1

有多种方法可以处理React绑定模式：

在渲染中绑定

render() {
  return (
    <LogoutButton onClick={::this.handleLogoutClick} />
    {/* or */}
    <LogoutButton onClick={this.handleLogoutClick.bind(this)} />
  )
}

在构造函数中绑定

如codepen所示，它解释了为什么你没有在render中看到绑定。

constructor(props) {
  super(props)
  this.handleLoginClick = this.handleLoginClick.bind(this)
  // or
  this.handleLoginClick = ::this.handleLoginClick
}

使用箭头功能

当您使用箭头函数声明handleLogoutClick时，该函数使用词法绑定。

通常在JS中，this的值取决于函数的调用方式。但是使用ES6箭头功能，我们可以创建表现不同的功能 - 它保留了封闭词汇上下文的this值，现在我们甚至不必调用bind！

handleLogoutClick = () => {
  this.setState({isLoggedIn: false});
}
// and you can simply
onClick={this.handleLogoutClick}

我个人更喜欢箭头功能，因为它产生更清晰的代码，而且我不必编写那个构造函数来绑定东西。我可以这样做：

class LoginControl extends React.Component {
  state = {isLoggedIn: false}

  //... other stuffs ...
}

至于渲染中的绑定（或渲染中的箭头函数），你应该总是避免这种情况。

使用PureComponent时，render中的绑定会导致不必要的重新呈现。

Why Arrow Functions and bind in React’s Render are Problematic

Answer 2

  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

当你这样做时，你要避免在将它们传遍整个地方时忘记绑定它们。

React事件没有绑定这个

2 个答案:

在渲染中绑定

在构造函数中绑定

使用箭头功能