Компоненты, возвращаемые из компонентов более высокого порядка, называются замыканиями?

У меня есть компонент более высокого порядка FormBuilder, например:

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

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

Я думаю, что компонент HOC, который возвращается из этой функции, можно рассматривать как закрытие, потому что он имеет доступ к своим реквизитам (собственная область), переменная name и компонент WrappedComponent (внешняя область действия), а также ко всему, что определено в глобальный охват. Кто-нибудь может проверить правильность моих мыслей?


reactjs javascript closures higher-order-components
person user117829    schedule 24.12.2018    source источник
comment
Закрытие — это комбинация функции и лексического окружения, в котором эта функция была объявлена. Эта среда состоит из любых локальных переменных, которые находились в области видимости на момент создания замыкания. (ref.)   -  person hindmost    schedule 24.12.2018
comment
Это замыкания в соответствии с developer.mozilla.org/en-US/docs. /Web/JavaScript/Closures, но маловероятно, что они часто называются, потому что это ничего не объясняет; любую функцию можно считать замыканием в JS.   -  person Estus Flask    schedule 24.12.2018
comment
HOC не замыкание, а HOC.prototype.render есть.   -  person Bergi    schedule 24.12.2018

Ответы (1)


arrow_upward
1
arrow_downward

Да, возврат компонента из компонента более высокого уровня (HOC) может рассматриваться как закрытие. С помощью замыкания мы можем поддерживать состояние, сохраняя значение в переменной, доступной для внутренней функции. В случае компонента более высокого порядка мы также можем поддерживать состояние, определяя состояние в компоненте более высокого уровня, и можем передать это состояние компоненту низкого уровня, а вызывая функцию события в свойствах, мы можем отправлять данные обратно в компонент более высокого порядка.

Разница: в случае закрытия у нас нет контроля над условным рендерингом. Если мы хотим отобразить только дочерний компонент, мы можем легко сделать это в случае компонента более высокого порядка с помощью метода жизненного цикла ShouldComponentUpdate(), но мы не можем сделать это в закрытии. В случае замыкания функция2, функция3, функция4 имеют доступ к переменной x

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

В случае компонента более высокого порядка у нас есть контроль над тем, какие данные отправлять компоненту более низкого уровня. Мы можем сделать x доступным для функции 1 и функции 2, отправив его в качестве реквизита, но у нас есть возможность не отправлять функцию 3, а также функцию 4. Таким образом, мы можем иметь больше контроля в случае компонента более высокого порядка. Все компоненты будут иметь собственную копию переменной x.

person Ashish    schedule 24.12.2018
comment
С помощью замыкания мы можем поддерживать состояние, сохраняя значение в переменной, которая может быть доступна внутренней функции. - да, мы могли бы это сделать, но это не отличительная черта замыканий. - person Bergi; 24.12.2018