Синтаксис Компоненты высокого порядка - Autosizer

Question

Насколько я понимаю, и, следуя документации , HO C - это функция, которая принимает компонент и возвращает новый компонент. Примером этого является функция connect from activ-redux:

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Я использовал Autosizer из React-virtualized и нашел следующее определение в его документации :

Компонент высшего порядка , который автоматически регулирует ширину и высоту одного дочернего элемента.

Пример синтаксиса, используемый в его документации, следующий:

ReactDOM.render(
  <AutoSizer>
    {({height, width}) => (
      <List
        height={height}
        rowCount={list.length}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={width}
      />
    )}
  </AutoSizer>,
  document.getElementById('example'),
);

Не уверен, что задаю ниже соответствующие вопросы, которые позволяют мне понять, что происходит. Если нет, я прошу вас забыть об этих двух вопросах и объяснить их по-другому.

1) Почему Autosizer является HO C? Я не могу сказать, что это функция, принимающая один компонент и возвращающая другой таким же образом, как и connect в response-redux.

2) В анонимной функции ({height, width}) => {...} высота и ширина - это свойства передаваемого объекта. , Какой объект и откуда он берется?

Answer 1

Вы можете найти исходный код для этого компонента здесь , но упрощенная версия будет выглядеть примерно так:

class AutoSizer extends React.PureComponent {
  // Do some extra stuff here to set width and height as they should be
  render() {
    return (
      <div
        // Call children as a function with the parameters calculated in this class
        {this.props.children({ height, width })}
      </div>
    );
  }
}

Таким образом, вы передаете AutoSizer потомок, который является функция.

<AutoSizer>
  {({height, width}) => {
   // your custom logic here that uses height and width sent from AutoSizer
  }}
</AutoSizer>

AutoSizer получает эту функцию в качестве реквизита, а затем вызывает ее с некоторыми вычисленными параметрами.

Answer 2

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

1) Почему Autosizer является HO C?

Более полезно думать о нем как о компоненте, который возвращает его дети, но с дополнительной информацией. В этом случае ширина и высота, которые дочерние компоненты могут использовать для изменения самих себя.

Но технически в исходном он возвращает некоторую оболочку JSX вокруг дочерних элементов, которые вы передаете. компонент, который он «берет», является его дочерним элементом (в данном случае <List>), а компонент, который он возвращает, является <div> с содержимым, в которое он затем помещает ваш <List>, предоставляя дополнительную информацию, которой он не имел бы в других отношениях. .

Так что это не так уж и отличается от connect, который принимает компонент, а затем возвращает компоненты с добавленными дополнительными подпорками, тогда это иначе имело бы.

Но независимо от того, является ли это HO C на самом деле не так уж важно здесь. Это компонент, который ожидает функцию, которая возвращает JSX как children. Это важный бит.

2) В анонимной функции ({высота, ширина}) => {...} высота и ширина являются свойствами передаваемого объекта. От какого объекта и откуда он взялся?

Прежде всего, все, что находится между открывающим и закрывающим тегами, это children этого компонента. Чаще всего это JSX, чистое значение javascript между {} символами. Это также может быть функция.

Так что в этом случае Autosizer ожидает, что ее children prop будет функцией. Autosizer затем вызывает эту функцию во время рендеринга и передает объект с width и height в качестве аргументов.

Autosizer может иметь такую ​​реализацию:

function Autosizer({children}) {
  return children({
    width: window.outerWidth,   // or some other internal logic
    height: window.outerHeight, // or some other internal logic
  })
}

This означает, что Autosizer имеет некоторые внутренние логики c для получения некоторых значений, а затем передает эти значения в функцию, передаваемую как children в качестве аргументов.

Этот шаблон называется пропеллером рендеринга. И у React есть документация об этом здесь.

---

Вот простой пример простого HO C, который предоставляет размер окна своим дочерним элементам через рендер проп .