javascript - 组件是否从称为闭包的高阶组件返回？

Question

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

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

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

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

Answer 1

Yes component return from higher level component(HOC) 可以视为闭包。在闭包的帮助下，我们可以通过将值存储在内部函数可以访问的变量中来维护状态。在高阶组件的情况下，我们也可以通过在高阶组件定义状态来维护状态，并将该状态传递给低阶组件，通过调用 props 上的事件函数，我们可以将数据发送回高阶组件。

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

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

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