React Render内内联函数与普通方法差异及onClick传参疑问

Hey there, let's break down these common React onClick questions clearly—they're key to mastering event handling in class components!

1. Why the two onClick syntaxes, and what does the arrow function do? #

Let’s break down each approach:

• <button onClick={this.handleClick}>Click</button>: Here, you’re passing a direct reference to the handleClick function to the onClick prop. When the button is clicked, React automatically invokes this function and passes the event object as its first argument. This works perfectly when you only need access to the click event itself, no custom parameters required.
• <button onClick={()=>this.handleClick(argument)}>Click</button>: This uses an arrow function as a wrapper. The arrow function acts as an anonymous callback that only runs when the button is clicked. When triggered, it calls your handleClick method and passes your custom argument to it.

The arrow function’s critical role here is preserving the this context. In class components, regular class methods don’t automatically bind this to the component instance. Arrow functions don’t create their own this—they inherit it from the surrounding scope (your component), so when you call this.handleClick inside it, this correctly refers to your component instance.

2. Why can't you use the first syntax in loops, and what's the core difference? #

The big issue with the first syntax in loops is execution timing. If you tried writing:

{todos.map(todo => (
  <button key={todo.id} onClick={this.handleClick(todo.id)}>Delete</button>
))}

This would execute this.handleClick(todo.id) immediately when the component renders, not when the button is clicked! That’s because you’re calling the function directly instead of passing a reference to it.

The arrow function approach fixes this:

{todos.map(todo => (
  <button key={todo.id} onClick={() => this.handleClick(todo.id)}>Delete</button>
))}

Here, you’re passing a function reference (the arrow function) to onClick. This function only runs when the button is clicked, at which point it calls handleClick with the correct todo.id for that iteration.

The core difference is:

• First syntax: Passes the result of the function call (runs on render)
• Second syntax: Passes a function that will call your method later (runs on click)

3. Why use arrow functions for class methods like handleDel, and can you avoid it? #

Let’s start with why the arrow function is used in handleDel:

handleDel = (id) => { 
  this.setState({ todo: this.state.todo.filter(item => item.id !== id) }); 
};

Class methods defined with arrow functions are automatically bound to the component instance when the component initializes. This means this inside handleDel will always refer to your component, no matter how you call it.

If you don’t use an arrow function to define handleDel, you can still make it work—but you need to ensure this is correctly bound when you call it. For example:

// Define handleDel as a regular class method
handleDel(id) {
  this.setState({ todo: this.state.todo.filter(item => item.id !== id) });
}

// Then in your render, use an arrow function to pass the id and preserve this
<button onClick={() => this.handleDel(todo.id)}>Delete</button>

This works because the arrow function in onClick inherits this from the component, so when it calls this.handleDel, this is correctly bound to the component instance.

The tradeoff here:

• Arrow function class method: Binds this once during component initialization, no extra function creation on each render.
• Regular method + onClick arrow function: Creates a new anonymous function every time the component renders. For most apps, this performance impact is negligible, but it’s worth noting for large lists or high-frequency renders.

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