How inefficient are anonymous functions in React component attributes?

Question

You should not use anonymous functions in reaction attributes, for example.

<a onClick=()=>doIt('myId')>Aaron</a>

I understand why this poses a performance problem for React reconciliation, because this anonymous function is recreated at every stage of rendering and therefore always causes real DOM re-rendering. My question is that for a small component (i.e. there is no table where each row has a link) is this insignificant? I mean, React is smart enough to replace the handler rather than re-display the DOM, right? so the cost is not so high?

Answer 1

, Anonymous function Function.bind(this) . ,

doIt.bind(this, 'myId') === doIt.bind(this, 'myId') // false

AND

() => doIt('myId') === () => doIt('myId') // false  

!

- , React.

class myComponent extends Component {

  doIt = (id) => () => {
    // Do Something
  }

  render() {
    <div>
      <a onClick={this.doIt('myId')}>Aaron</a>
    </div>
  }
}

Answer 2

JSX :

<a onClick={ ()=>doIt('myId') }>Aaron</a>

, , . . .

, . this ES6, React.Component .

, "" (.. , ), . .

Answer 3

:

• : ( )
• : , .

, :

. , , . , .

---

Note. The reaction does not handle the callback details in a different way than other details. He always compares the old and the new support. Thus, it is re-displayed when an anonymous function is present, since an anonymous function is always created.