React 函数调用方法答案

【问题标题】：React Function Calling MethodsReact 函数调用方法
【发布时间】：2022-01-15 10:03:08
【问题描述】：

在 React 中，我可以通过两种不同的方式调用 onClick 中的函数。

第一种方法：箭头函数

const Modal = ({isOpen, toggle, children}) => {
    <div onClick={() => toggle()}>
      <div>
        {children}
      </div>
    </div>
}

第二种方法：不带括号

   const Modal = ({isOpen, toggle, children}) => 
   {
     return(
     <div onClick={toggle}>
       
     </div>
     )
   }

它们之间有什么区别？ () => 切换() 切换

【问题讨论】：

第二种方法会将 onclick 事件中的所有参数传递给toggle，即使它不期望并且不使用它们。第一种方法不向toggle 传递任何参数。
这里必须成为一个很好的欺骗目标......
取自@JackBashford：第一个方法创建一个新函数，在调用该函数时，将调用toggle，不带任何参数。
我忘了提到那部分，谢谢@T.J.Crowder。

标签： javascript reactjs react-hooks

【解决方案1】：

第一种方法onClick={() => toggle()} 创建一个新函数并将其分配给onClick 属性。该函数在调用时将调用toggle，不带任何参数。每次渲染该组件时都会创建一个新函数。

第二种方式onClick={toggle}不创建新函数，它直接将toggle赋值给onClick属性。这意味着当它被调用时，它会接收任何传递的参数（即使它不期望有任何参数）。

每个都可以是合适的，这取决于你想做什么。如果toggle 期望单击事件将传递它的参数，那么您最好使用第二种方法，因为您不会每次都创建一个新函数。如果没有，通常最好不要将其设置为接收它不期望的参数。

当您使用像div 这样的 DOM 元素执行此操作时，第一种方法在每个渲染上创建一个新函数这一事实可能并不重要，但假设您将一个函数传递给一个需要时间的复杂组件进行渲染并优化渲染（通过React.memo、PureComponent、shouldComponentUpdate 等，避免重新渲染，如果其道具不改变）：

return <SomeComplexComponent onSomething={() => toggle()} />

在这种情况下，你最好不要“记忆”函数（在这种情况下，通常是通过useCallback 或useMemo），这样你就不会每次都向组件传递一个新函数，所以复杂组件认为它不需要每次都重新渲染。

const onSomething = useCallback(() => toggle(), [toggle]);
// ...
return <SomeComplexComponent onSomething={onSomething} />

虽然这仍然会在每次渲染时创建一个新函数（因此可以将其传递给 useCallback），但如果 toggle 没有更改，useCallback 将返回该函数的先前版本，这允许 SomeComplexComponent以避免重新渲染。

但在将 this 传递给 HTML 元素或简单组件时，不需要这样做。

【讨论】：

this 这两种方法也不一样吗？
@EEAH - 在一般情况下，是的，好点。在这种特定情况下可能不是，因为 React 在调用事件处理程序或组件函数时没有设置this（所以this 通常是undefined）。但是，是的，第一种方式this 将是创建箭头函数的位置，第二种方式this 将是调用函数的设置（假设toggle 不是箭头函数或绑定函数）。

【解决方案2】：

第一种代码

onClick={toggle}

在这种onClick方法中，onClick内部只能调用一个函数。

第二种代码

假设你需要在 onClick 内部调用多个函数。然后你必须使用

onClick={() => toggle()}

示例：-

OnClick = {()=>{
 toggle1();
 toggle2();
}}

你也可以在函数内部传递参数。使用如下所示的第二种类型。示例：-

OnClick = {()=>{
     person(name);
    }}

【讨论】：

这在技术上是正确的，但答案不完整。

【解决方案3】：

在() => toggle() 中，您正在添加一个匿名函数，然后调用切换函数。如果你想传入一些参数来切换功能，你可以使用这个方法。例如() => toggle(id, name..etc)

另一种方法只是添加事件处理程序，该函数将接收事件作为参数。

【讨论】：