性能问题：onClick={() => {}} 函数是在点击还是渲染时创建的？答案

【问题标题】：Performance question: is onClick={() => {}} function created on click or on render?性能问题：onClick={() => {}} 函数是在点击还是渲染时创建的？
【发布时间】：2019-03-02 18:29:10
【问题描述】：

假设下面的组件被实例化一千次（我不是说一个实例化被重新渲染一千次）：

class TableRow extends Component {
  render() {
    return (
      <tr onClick={() => {console.log('You clicked this table row!');}}>
        <td>foo</td>
        <td>bar</td>
      </tr>
    );
  }
}

如果 onClick 函数仅在实际点击发生时创建，那么我就不用担心了。但是如果它被创建了一千次，我会想把它移到原型中，这会很丑。

（我知道如果我把它放到类字段中，比如handleClick = {console.log('You clicked this table row!)}，它肯定会很慢，因为它被编译到构造函数中。但是内联模式更快吗？）

【问题讨论】：

显然该函数是在渲染过程中创建的。除非您遇到性能问题，否则您不应该真正担心。您关于“类字段”的第二部分问题没有多大意义。
看这个问答详细解释stackoverflow.com/questions/52031147/…
为什么把它移到原型上会很丑？

标签： reactjs

【解决方案1】：

来自React documentation

在渲染中使用箭头函数会在每次渲染组件时创建一个新函数，这可能会影响性能（见下文）。

【讨论】：

【解决方案2】：

是的，它是在每次渲染时创建的。 handleClick 方法只会创建一次，并且每次都使用相同的函数。

【讨论】：

【解决方案3】：

这种语法的问题是每次 TableRow 呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为道具传递给较低的组件，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。更多info

【讨论】：

【解决方案4】：

试试吧™️

let counter = 0; const a = [1,2,3];
class Comp1 extends React.Component {
  render() {
    return a.map(v => <tr onClick={l(1), () => console.log('You clicked this row')}>Row {v}</tr>);
  }
}
class Comp2 extends React.Component {
  handleClick = (l(2), () => console.log('You clicked this row'));
  render() {
    return a.map(v => <tr onClick={this.handleClick}>Row {v}</tr>);
  }
}
ReactDOM.render([<Comp1/>, <Comp2/>], document.querySelector('main'));

/** Log function creation */
function l(n) {
  console.warn(`${++counter}: Creating function #${n}`);
}

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<main></main>

【讨论】：