() => someFunc 和 someFunc 之间的区别答案

【问题标题】：Difference between () => someFunc and someFunc() => someFunc 和 someFunc 之间的区别
【发布时间】：2021-06-14 16:36:44
【问题描述】：

我有一个反应组件

import React from 'react';

function App() {

  const someFunc = () => {
    console.log('clicked');
  }

  return (
    <div >
      <button onClick = {() => someFunc}>Button 1</button>
      <button onClick = {someFunc}>Button 2</button>
    </div>
  );
}

export default App;

调用 onClick = {() => someFunc} 和 onClick = {someFunc} 有什么区别。提前感谢您的帮助。

【问题讨论】：

你的意思是() => someFunc()？
假设() => someFunc，你的意思是() => someFunc()。这个() => someFunc() 语法的问题是每次App 呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为道具传递给较低的组件，则这些组件可能会进行额外的重新渲染。 reactjs.org/docs/handling-events.html

标签： reactjs function components

【解决方案1】：

onClick = {() => someFunc}

这只是在 onClick 处理程序运行时返回对 someFunc 的引用。这不会做任何事情（不会像你期望的那样工作）。

onClick = {someFunc}

这是传递一个对someFunction 的直接引用，它会在调用 onClick 处理程序时被调用。你可以考虑把someFnnction的body放在这里，就这样

onClick = {() => {
    console.log('clicked');
  }}

【讨论】：