React JSX 中的 onClick={increase} 和 onClick={()=>{increase()}} 有什么区别？

Question

我搜索了一下，没有找到任何结果，所以我在这里问。

Answer 1

如果increase function 没有 arguments，则没有区别。

唯一不同的方法是，如果定义此道具的组件使用从onClick function 内部返回的值。 例如，对于一般情况：

<Foo fn={fn} />

<Foo fn={() => { fn() }} />

这两个是不等价的，因为第一个会将fn的返回值返回给 Foo，而第二个会将undefined返回给 Foo。 如果 Foo 使用它的fn属性的返回值，你会看到不同。

但是对于 React 中的onClick ，返回值无关紧要，并且被忽略 - 所以你最好使用onClick={increase}来节省几个字符。

如果increase function确实取arguments，那么做

onClick={increase}

将点击事件传递给 function，但是

onClick={() => { increase() }}

不会将任何东西传递给 function。

（要使用匿名内联表单将事件传递给 function，您需要onClick={(e) => { increase(e) }} ）

Answer 2

对CertainPerformance的回答的一个补充 - 使用onClick={increase} ，我们可以通过将 function 传递给useCallback挂钩来传递回调的记忆版本。

喜欢，

const increase = useCallback(()=>{
   //some logic
},[])
...

<Foo onClick={increase} />

这有助于防止在重新渲染父组件时不必要地渲染组件，从而提高性能。

而在onClick = {()=>{increase()}}的情况下，每次都会重新渲染组件，因为在每次渲染父组件时都会创建对回调的新引用。 此外，我们不能像onClick = {useCallback(()=>{increase()},[])}在这里使用useCallback ，因为不能在回调中调用useCallback 。 我们收到错误消息 - React Hook "useCallback" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. React Hook "useCallback" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

参考：钩子规则， useCallback

Answer 3

不同之处在于：

onClick={increase}

仅调用“增加”function，您不能通过此方法将参数传递给“增加”function，您也只能调用这个ZC1C425268E68385D14AB5074C17Z，但是当您使用：

onClick={()=> {
increase(argument1, argument2,...);
secondFunction();
thirdFunction();
//and so many other functions
}
}

您可以将 arguments 传递给您的函数，也可以调用其他函数。