Question

我可以看到为按钮onClick事件分配事件处理程序的不同风格。任何人都可以建议何时在按钮onClick事件处理程序上使用内联函数？

onClick={props.handleDeleteOption(props.optionText)}; // Call the handler directly

onClick={(e) => {
          props.handleDeleteOption(props.optionText);
        }} // Call the handler through inline-function

Answer 1

性能

是否使用内联事件处理程序功能都会对应用程序的性能产生影响。

内联事件处理程序是匿名函数。每次渲染组件时都会创建它们。也就是说，每次调用setState或组件收到新的道具时。

无论何时将要渲染组件（状态已更新或接收新道具时），react都会在该组件的先前DOM和新DOM之间进行浅表比较。如果发现它们与状态更新之前的道具具有不同的道具，则组件将重新渲染该特定组件及其所有子组件。如果不是，则假定该组件与旧DOM相同，因此不会呈现它。

现在，内联函数是对象（函数是javascript中的对象。）并且当react比较函数时，它将进行严格的比较。内联函数的值可能没有更改，但是它是一个完全不同的函数（内存中的不同引用），因此React检测到已发生了更改。并且当发生更改时，React会重新渲染组件及其所有子组件。

再次，我只想说性能决定通常是一个权衡。这种解释并不意味着您应该删除所有内联事件处理程序并在类级别定义它们。由于必须在构造函数中完成绑定，因此这可能会减慢组件的首次渲染速度。还有一种叫做过早优化的东西，它可能导致代码质量低下，或者可能不值得。

Answer 2

根据ReactJS文件：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

以上两行是等效的，并使用箭头功能和   Function.prototype.bind分别。

在这两种情况下，表示React事件的e参数都是   在ID之后作为第二个参数传递。有了箭头功能，我们   必须明确地传递它，但使用bind任何进一步的参数都是   自动转发。

可以在此链接的底部找到：https://reactjs.org/docs/handling-events.html

Answer 3

主要区别在于你如何编写函数。 documentation的示例：

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

第二个：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

但正如你可以在文档中看到的那样，从性能角度来看，第二种方法更糟糕。

Answer 4

onClick={props.handleDeleteOption(props.optionText)};这会导致props.handleDeleteOption(props.optionText)}被调用而不点击按钮。

在javascript中，让我们有一个名为foo的函数，foo()将调用该函数，而foo本身将是对该函数的引用。

因此，当您在第二种情况下执行操作时，该函数将传递给onClick处理程序，并且仅触发onClick。第一行代码将无法正常工作，因为它本身就是在那里调用的。如果您不必将任何数据传递给该函数，您也可以编写onClick={props.handleDeleteOption}（注意没有括号），这将按预期工作。

但是既然有数据，你可以写出来的唯一方法就是onClick={(e) => {props.handleDeleteOption(props.optionText)}}

何时在onClick事件按钮上使用内联函数 - Javascript / React.js

4 个答案: