javascript - 何时在按钮 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 或组件收到新 Prop 时。

每当一个组件即将被渲染时(当状态已经更新或接收到新的 props 时)，React 会在该组件的先前 DOM 和新 DOM 之间执行浅层比较。如果发现它们的 props 与状态更新前的 props 不同，则组件将重新渲染该特定组件及其所有子组件。如果不是，它会假定该组件与旧 DOM 相同，因此不会呈现它。

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

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