Reactjs 为什么需要在构造函数中绑定函数

Reactjs 为什么需要在构造函数中绑定函数,reactjs,redux,Reactjs,Redux,我有一个与此代码相关的问题: 具体而言: constructor(props) { super(props) this.handleChange = this.handleChange.bind(this) this.handleRefreshClick = this.handleRefreshClick.bind(this) } 我想这是一个由两部分组成的问题 为什么我需要将handleChange设置为类this.handleChange=的一个实例,我不能

我有一个与此代码相关的问题:

具体而言:

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleRefreshClick = this.handleRefreshClick.bind(this)
  }
我想这是一个由两部分组成的问题

  • 为什么我需要将handleChange设置为类this.handleChange=的一个实例,我不能只使用handleChange的静态函数,并在类
    onClick={handleRefreshClick}>
    中直接调用它
  • 我不知道这里发生了什么:
    this.handleRefreshClick.bind(this)

  • 感谢

    这两个功能handleChange和handleRefreshClick作为道具传递给其他组件

    它们与此绑定,因为当子组件调用这些函数时,它们将始终与应用程序上下文一起执行


    您可以从类中删除这些函数,但仍然需要绑定这些函数,因为您将更新应用程序的某些部分,并以相反的顺序回答

  • this.handleRefreshClick.bind(something)
    返回一个新函数,其中对
    this
    的引用将引用
    something
    。这是保存
    This
    的当前值的一种方法,该值在调用构造函数期间处于作用域内,以便以后调用函数时使用
  • 如果您的函数不需要访问组件的状态,那么当然,您不需要绑定它们

  • 支持将这些行添加到构造函数的参数是,新绑定函数在类的每个实例中只创建一次。你也可以使用

    onClick={this.handleRefreshClick.bind(this)}
    
    或(ES6):


    但这两种方法中的任何一种都会在每次重新呈现组件时创建一个新函数。

    这样做的原因是将
    this
    关键字绑定到该对象。正如Tom所说,从类调用函数并不意味着它是在创建该函数的对象的上下文中被调用的

    我想您可能会感到困惑,因为在React示例/教程中,使用React.createClass()会自动为您绑定
    。因此,您可能想知道为什么React.createClass()会这样做,但不使用ES6类语法

    这是因为React不想弄乱ES6规范(将
    绑定到其类中的函数不在ES6类规范中),但同时希望为其用户提供ES6类语法的便利。你可以在下面阅读更多关于这方面的内容


    希望这能解释为什么会发生这种情况。

    我个人在构造函数中绑定函数,这样它们的引用在每次重新渲染时都不会改变

    如果您将函数传递给只读的子对象,而这些子对象的道具没有更改时,您不需要更新这些函数,那么这一点尤其重要。我使用react插件纯渲染混合

    否则,在每个父级重新渲染时,将发生绑定,新的函数引用将被创建并传递给子级,这将认为道具已经更改

    这取决于函数的调用方式,而不是函数的创建方式/位置

    当你看代码时,你会看到两个“this”,为什么?看起来很奇怪,对吧? 问题在于,这与它看起来的样子无关。这是关于它的名称。

    你基本上是在说。嘿,当有人打电话给你时,记得
    这个
    是指这个类。不是别的

    当有人调用你的类时,比如:
    x.yourClass().bind(this)
    你说的是
    这个
    不是
    x
    ,而是类本身(带有道具和状态等)


    请注意,即使您直接调用类,如
    yourClass()
    ,您实际上是在浏览器上调用
    window.yourClass()
    ,这也是为什么在本例中是this is window的原因。

    不完全可能重复,我不太理解在类的上下文中,尤其是数字2,它不会改变
    bind
    的含义。您可以使用
    bind
    来维护
    this
    的作用域。在react的上下文中,这允许您调用类似于
    this.setState
    等的东西。但是doing.bind(this)类的整个思想是它封装了“this”,所以当类的整个实例应该封装scope@Saad不是JS!课堂真的很有趣;他们对
    这个
    没有做任何特别有用的事情。是的,这就是我在回答中说的:)@user1970395相反,我不会说这个回答中有太多具体的反应。如果事件处理程序中使用的任何类方法访问实例的属性,则总是需要绑定
    this
    。@abhinavm93我的意思是,除非将
    this
    显式绑定到函数,否则它的值取决于调用它的上下文。React使用render函数创建带有事件处理程序的DOM元素。从处理这些事件的上下文中,不知道这些事件处理程序所属的类,除非绑定它。
    onClick={() => this.handleRefreshClick()}