React中两种onClick事件绑定方式的差异、优选方案及适用性分析

Great question! These two patterns are everywhere in React code, and understanding their differences is key to writing efficient, bug-free components. Let’s break this down clearly:

Core Differences #

Let’s start with what each pattern actually does under the hood:

• <Test onClick={() => myFunction()} />: This creates a new anonymous arrow function every time your component renders. When the click event fires, this anonymous function runs, and then calls myFunction as part of its logic.
• <Test onClick={myFunction} />: Here, you’re passing a direct reference to myFunction itself. No new function is created on each render—when the click happens, React executes myFunction directly.

Beyond the basic mechanics, here are the key practical differences:

1. Performance Impact:
   • The first pattern generates a new function instance on every render. If Test is a memoized component (using React.memo or PureComponent), this new function reference will trigger an unnecessary re-render, since React sees the onClick prop as a new value.
   • The second pattern avoids this entirely—since you’re passing the same function reference (unless myFunction itself changes), memoized child components won’t re-render unnecessarily. This is especially impactful in large lists or frequently updated components.
2. Parameter Passing:
   • The first pattern makes it trivial to pass custom parameters to myFunction, e.g., () => myFunction(itemId, userInput). You can wrap any arguments you need inside the anonymous function.
   • The second pattern can’t directly pass custom parameters—if you try onClick={myFunction(itemId)}, myFunction will execute immediately when the component renders, not when the click happens. To pass params here, you’d need to use Function.prototype.bind (e.g., myFunction.bind(this, itemId)) or still wrap it in an arrow function (which brings you back to the first pattern’s behavior).
3. this Binding (Class Components):
   • In class components, the first pattern’s arrow function automatically captures the component instance’s this context, so you don’t need to manually bind myFunction to this.
   • The second pattern requires you to bind this explicitly (either in the constructor with this.myFunction = this.myFunction.bind(this) or by defining myFunction as a class field arrow function), otherwise this will be undefined inside myFunction.

Which Pattern Is Better? #

As a default choice, <Test onClick={myFunction} /> is almost always preferable for these reasons:

• It’s more performant, reducing unnecessary function creation and child component re-renders.
• It’s cleaner and more readable—you’re directly passing the function that should run on click, without an extra wrapper layer.
• It avoids potential bugs related to unintended function execution (like the accidental immediate call we mentioned earlier).

Is the Second Pattern Always Optimal? #

No! There are several scenarios where you must use the first (wrapper function) pattern:

• When you need to pass custom parameters: As mentioned, if your click handler needs specific values (like an item ID from a list), wrapping the function is the simplest way to pass those args without triggering immediate execution.
• When you need to add pre/post logic: If you want to run extra code before or after myFunction (e.g., logging, state updates), the wrapper function lets you compose that logic: () => { console.log('Click recorded'); myFunction(); }.
• When dealing with unbound class methods: If you haven’t bound your class method to this (and don’t want to), the arrow function wrapper will handle the context for you.

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