JavaScript/React中bind与箭头函数的对比及优劣分析

Great question! Let’s break down the differences between using .bind(this) and arrow functions in React event handlers (and JavaScript in general), including their pros and cons, using your examples as a starting point.

1. Using .bind(this) in the Constructor #

Your first example uses the classic constructor binding approach:

class Click extends React.Component {
  constructor(props) {
    super(props);
    this.clickEvent = this.clickEvent.bind(this);
  }

  render = () => (
    <button onClick={this.clickEvent}>Click Me</button>
  )

  clickEvent() {
    console.log(this); // 'this' refers to the class
  }
}

How it works #

The .bind() method creates a new function where this is explicitly set to the component’s class instance. We assign this bound function back to the class property, so every time the component renders, this.clickEvent points to the same function reference.

Pros #

• Performance-friendly: Since we only bind once in the constructor, the function reference never changes between renders. If you pass this handler as a prop to a memoized child component (using React.memo or PureComponent), the child won’t re-render unnecessarily.
• Clean JSX: Your render method stays tidy—no inline function logic cluttering up the button’s onClick prop.

Cons #

• Boilerplate overhead: For components with multiple event handlers, you’ll need to write a .bind() line for each one in the constructor. This can get repetitive.
• Easy to miss: If you forget to bind a handler, this will be undefined (thanks to React’s strict mode) when the function runs, leading to a frustrating bug.

2. Using Inline Arrow Functions #

Your second example uses an inline arrow function inside the onClick prop:

class Click extends React.Component {
  render = () => (
    <button onClick={() => { this.clickEvent() }}>Click Me</button>
  )

  clickEvent() {
    console.log(this); // 'this' refers to the class
  }
}

How it works #

Arrow functions don’t have their own this context—they inherit it from the surrounding lexical scope. Since your render method is an arrow function (so this points to the class instance), the inline arrow function inherits that this, allowing this.clickEvent() to work correctly.

Important note: A brand new arrow function is created every time the component renders.

Pros #

• No boilerplate: No constructor code required—you can define your handler normally and wrap it in an arrow function inline.
• Easy argument passing: If you need to send extra data to the handler (like an ID), you can do it directly: () => this.clickEvent(itemId) without extra binding steps.

Cons #

• Potential performance issues: Creating a new function on every render can trigger unnecessary re-renders in child components that receive this function as a prop. Even memoized children will re-render because the function reference is new each time.
• JSX clutter: For components with multiple handlers, inline arrow functions can make your JSX harder to read at a glance.

Bonus: Class Field Arrow Functions #

A modern middle ground is defining the handler itself as an arrow function class field:

class Click extends React.Component {
  clickEvent = () => {
    console.log(this); // 'this' refers to the class
  };

  render() {
    return <button onClick={this.clickEvent}>Click Me</button>;
  }
}

This approach combines the best of both worlds:

• No constructor binding needed
• The function reference stays consistent across renders (so no extra re-renders for memoized children)
• It’s widely supported in React toolchains like Create React App, though it was originally a stage 3 ECMAScript proposal.

When to Choose Which? #

• Go with .bind(this) in the constructor if you’re optimizing for performance in frequently rendered components, or working with an older React codebase that follows this pattern.
• Use inline arrow functions if you need to pass arguments to the handler, or if the component is small and performance isn’t a critical concern (most simple components fall here).
• Opt for class field arrow functions if you want a clean, modern approach with solid performance—just make sure your build setup supports it.

内容的提问来源于stack exchange，提问作者Kyle Woolley