React - 作为 onClick 参数的 {doThisFunc} 、 {doThisFunc()} 和 {()=>doThisFunc()} 有什么区别？

Question

我对 React 完全陌生，并且在 JS 方面表现平平。只是想知道为按钮的 onClick 事件提供这些参数有什么区别：

• onClick={doThisFunc}
• onClick={doThisFunc()}
• onClick={() => doThisFunc()}

最近，我遇到了一个错误，我使用 onClick={doThisFunc(a)} 等参数调用函数，并且应用程序出现“重新渲染次数过多。React 限制渲染次数以防止无限循环”。但后来我将其更改为 onClick={() => doThisFunc(a)} 并且它工作得很好。

很抱歉提出这样的初学者问题，非常感谢您的反馈！

Answer 1

onClick={doThisFunc}

这意味着“将函数传递到 onclick 属性中”。稍后，当点击发生时，react 将调用doThisFunc，传入点击事件。假设您希望该函数接收单击事件，这通常是正确的做法。

onClick={doThisFunc()}

这意味着“立即调用该函数，并将其返回值传递给 onclick 属性”。这通常是一个错误。doThisFunc仅当工厂创建点击处理程序函数时，您才会执行此操作，但这种情况很少见。

onClick={() => doThisFunc()}

这意味着“使用 text 创建一个新函数() => doThisFunc()，并将其传递给 onClick”。稍后，当单击发生时，React 将调用您的新函数，该函数又将调用 doThisFunc。

这种方法有时只是一种更冗长的方法，可以获得与选项 1 相同的最终结果。但它确实有一个好处，您可以将任何想要的值传递到 doThisFunc 中，因此如果您想要传递除事件之外的其他内容，你会用这个。