React 如何处理传递给事件处理程序的函数/回调？

Question

我寻找了关于这个特定问题的不同博客/文档，我了解一个方法需要如何绑定才能在渲染函数中使用，但是文档无法详细解释一些事情，函数可以通过不同的方式被传递到事件处理程序的是：// call a already bound funciton<button onClick={this.sayHello}>  Click me!</button>// bind in place <button onClick={this.sayHello.bind(this)}>  Click me!</button>// use es6 arrow functions<button onClick={() => alert('hello'))}>  Click me!</button>React 文档表示，推荐的方法是绑定一个函数，否则该函数将在组件的每次渲染时被调用，并且可能会造成混乱。但是我不知道为什么每次渲染都会调用它。但它不是只有在点击时才被调用吗？或者onClick 如何处理或执行在 food 下传递的函数？

Answer 1

React 使用合成事件。如果您使用基于类的组件，则需要将函数范围绑定到该类(only when we do not use arrow functions in our class)，否则关键字的范围this将在该函数中丢失。这意味着如果使用普通的 ES5 函数作为处理程序并且我们this.setState()在其中使用，它将无法按预期工作。

如果您arrow function在类中用作处理函数，则无需将其绑定到类的范围，因为箭头函数的范围是其上方的一个执行上下文。

如果您使用的是功能组件。没有this可用的关键字，您直接调用函数（函数本身外部或内部的处理程序）

现在：让我解释一下语法：

语法-1：

   // call a already bound funciton

       <button onClick={this.sayHello}>

         Click me!

        </button>

sayHello您只需在 Component 类中拥有一个名为（如下所示）的事件处理程序。

sayHello(){ ... }   // Binded in constructor by doing this.sayHello = this.sayHello.bind(this) 

或者

sayHello = ()=>{}

单击按钮时将调用/调用处理程序。

语法2：

// bind in place 

<button onClick={this.sayHello.bind(this)}>

  Click me!

</button>

this这种语法是在我们的处理函数中绑定关键字语法的另一种简单方法sayHello，原因与我上面提到的相同。

语法3：

// use es6 arrow functions 

<button onClick={() => sayHello('hello'))}>

  Click me!

</button>

每当我们想要将参数传递给处理函数时，我们都会使用这种语法。因此，在这种情况下，当单击按钮时，我们的sayHello函数将获取值“hello”作为参数。

你最后的怀疑：当 React 文档说该函数将在组件的每次渲染时被调用，并且可能会造成混乱。它们意味着，如果您仅在使用()=>{}语法的元素内错误地使用事件处理程序，并且还在this.setState()其中使用了 a，它将强制重新渲染。因为这就是setState()重新渲染我们的组件的作用。当它到达同一行代码时，它将再次重新渲染，这最终将破坏我们的应用程序。

Answer 2

不同之处在于，当您在传递给某个属性（例如案例 #2 和 #3）时声明函数时，每次更新组件时，组件都会再次重新创建相同的函数。

另一方面，当您之前声明它并像情况 #1 一样传递它时，在组件更新时，该属性将保留函数引用并且不会重新创建该函数。

假设情况#1 您只创建了一个函数，而情况#2 和#3 该函数将在每次更新时重新创建。