从高阶组件返回的组件是否称为闭包?

时间:2018-12-24 17:30:16

标签: javascript reactjs closures higher-order-components

我有一个像这样的高阶分量FormBuilder

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

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

我认为从该函数返回的HOC组件可以被视为闭包,因为它可以访问其props(自己的作用域),变量name和组件{{ 1}}(外部函数的作用域)以及全局作用域中定义的任何内容。任何人都可以验证我的想法是否正确?

1 个答案:

答案 0 :(得分:1)

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

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

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

对于高阶组件,我们可以控制将哪些数据发送到低阶组件。我们可以通过作为道具发送使x可用于function1和function2,但是我们可以选择不发送给function3以及function4。这样,在高阶分量的情况下,我们可以进行更多控制。所有组件都将拥有x变量的副本。