从高阶组件返回的组件是否称为闭包？答案

【问题标题】：Are the components returned from higher-order components called closures?从高阶组件返回的组件是否称为闭包？
【发布时间】：2019-05-23 18:49:04
【问题描述】：

我有一个像这样的高阶组件FormBuilder：

const FormBuilder = (WrappedComponent) => {
  const name = 'bob';

  return class HOC extends React.Component {
    render() {
      return (
        <div> 
          <WrappedComponent {...props} />
        </div>
      );
    }
  }
}

我认为从这个函数返回的 HOC 组件可以被认为是一个闭包，因为它可以访问它的 props（自己的范围）、变量 name 和组件 WrappedComponent（外部函数的范围）以及在全局范围内定义的任何内容。任何人都可以验证我的想法是否正确？

【问题讨论】：

闭包是函数和声明该函数的词法环境的组合。此环境由创建闭包时在作用域内的所有局部变量组成。 (ref.)
它们是根据developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 定义的闭包，但它们不太可能经常被称为，因为这并不能解释任何事情；任何函数都可以被认为是 JS 中的闭包。
HOC 不是闭包，但HOC.prototype.render 是。

标签： javascript reactjs closures higher-order-components

【解决方案1】：

是的组件从更高级别的组件返回 (HOC) 可以被视为闭包。在闭包的帮助下，我们可以通过将值存储在内部函数可以访问的变量中来维护状态。在高阶组件的情况下，我们也可以通过在高阶组件中定义状态来维护状态，并将该状态传递给低阶组件，并通过调用道具上的事件函数，我们可以将数据发送回高阶组件。

区别： 在关闭的情况下，我们无法控制条件渲染。如果我们只想渲染子组件，我们可以通过 ShouldComponentUpdate() 生命周期方法在更高阶组件的情况下轻松完成，但我们不能在闭包中完成。在闭包的情况下function2，function3，function4可以访问变量x

function1(){
  var x = 4;
    return function2(){
      return function3(){
      return function4(){
      }
      }
      }
      }

在高阶组件的情况下，我们可以控制将哪些数据发送到低阶组件。我们可以通过作为 props 发送使 x 对 function1 和 function2 可用，但我们可以选择不发送给 function3 和 function4。通过这种方式，我们可以在更高阶组件的情况下进行更多控制。所有组件都将拥有自己的 x 变量副本。

【讨论】：

"在闭包的帮助下，我们可以通过将值存储在内部函数可以访问的变量中来维护状态。" - 是的，我们可以这样做，但是这个不是闭包的显着特征。