在 React 中，为什么包含闭包的被调用函数不会在组件挂载时立即运行？答案

【问题标题】：In React, why is a called function containing a closure not immediately run upon component mount?在 React 中，为什么包含闭包的被调用函数不会在组件挂载时立即运行？
【发布时间】：2020-03-08 16:23:42
【问题描述】：

对于典型的 react 函数，在事件中调用函数（例如onClick={}）将导致在组件挂载时立即调用该函数。

例如，此代码将在挂载时立即触发，因为正在调用该函数：

const App = () => {
  const fn = () => {
    alert("hey");
  };
  return (
      <button onClick={fn()}>click</button>
  );
};

但是，如果函数使用闭包，它只会在单击按钮时执行。例如：

const App = () => {
  const fn = () => {
    return () => alert("hey");
  };
  return (
      <button onClick={fn()}>click</button>
  );
};

为什么会这样？

【问题讨论】：

我没有看到任何关闭。当fn 被调用时，另一个函数被返回，你不会调用那个函数。我不知道这在反应中是否有效，但请尝试：onClick={fn()()}（第一个() 调用fn，第二个() 调用fn 返回的函数）
JSX 表达式在它们出现在代码中的位置进行评估，因此您的return 语句完全评估<button>，包括{ } 中的插值。因此，{ } 内部的表达式被求值。
@ibrahim 从另一个函数中返回的任何函数都会创建一个闭包，因为它能够访问其范围内的所有变量。
在这两种情况下，您在分配onClick 时都在运行fn()，因此在组件渲染时会执行fn。不同之处在于，第一个只是调用警报，而第二个返回一个函数，该函数调用了一个警报。 onClick 分配给 fn() 的返回值，在第一个示例中为 null（因为它不返回任何内容），在第二个示例中为函数。
@JonasWilms 是的，但我没有看到任何变量。

标签： javascript reactjs closures

【解决方案1】：

要了解这里发生了什么，将函数调用替换为 它正在评估的内容（内联调用）可能会有所帮助。在第一种情况下，它是undefined，因为该函数不返回任何内容。在评估它的价值时，它也alerts，导致：

 alert("hey"); // this is more or less executed here
 <button onClick={undefined} >

在第二种情况下，函数返回另一个函数，所以这就是它的求值结果：

 <button onClick={() => alert("hey")} >

现在将一个函数 get 传递给onClick，当实际单击按钮时将调用该函数。

【讨论】：