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

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 或组件收到新的 props 时。

每当一个组件即将被渲染时（当状态被更新或接收到新的 props 时），react 会在之前的 DOM 和该组件的新 DOM 之间执行一个浅层比较。 如果在状态更新之前发现它们具有与 props 不同的 props，则组件将重新渲染该特定组件及其所有子组件。 如果不是，则假定组件与旧 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

主要区别在于您如何编写函数。 文档中的示例：

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)}}