反应句柄 functions/callbacks 如何传递给事件处理程序？

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

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

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

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

语法 1：

   // call a already bound funciton
       <button onClick={this.sayHello}>
         Click me!
        </button>

您将在 class 组件中简单地拥有一个名为 sayHello 的事件处理程序（如下所示）。

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

或

sayHello = ()=>{}

当按钮被点击时，处理程序将是 called/invoked。

语法 2：

// bind in place 
<button onClick={this.sayHello.bind(this)}>
  Click me!
</button>

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

语法 3：

// use es6 arrow functions 
<button onClick={() => sayHello('hello'))}>
  Click me!
</button>

每当我们想将参数传递给处理函数时，我们都会使用这种语法。所以，在这种情况下，当按钮被点击时，我们的 sayHello 函数得到一个值“hello”作为参数。

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

Answer 2

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

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

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

反应句柄 functions/callbacks 如何传递给事件处理程序？

How does react handle functions/callbacks passed to event handlers?

javascript

dom-events

reactjs