何时在按钮 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。

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

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