语法高阶组件-Autosizer

Question

据我所知，在documentation之后，HOC是一个接受组件并返回新组件的函数。一个例子是来自react-redux的connect函数：

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

我正在使用Autosizer中的React-virtualized，并在其documentation中找到了下一个定义：

高阶组件自动调整单个孩子的宽度和高度。

其文档中使用的语法示例是下一个：

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

[不确定我是否在下面询问适当的问题，以使我了解发生了什么。如果不是这样，我请您忘记这两个问题，并以不同的方式进行解释。

1）为什么Autosizer是HOC？我不能说这是一个函数，该函数接收一个组件并以与react-redux中的connect相同的方式返回另一个组件。

2]在匿名函数({height, width}) => {...}中，高度和宽度是要传递的对象的属性。哪个对象以及它来自哪里？

Answer 1

另一种思考方式是，高阶组件比其子类高阶（意味着它们更接近DOM节点树的根），并且它们修改或向其子类提供信息。

1）为什么将Autosizer设为HOC？

因为它是一个返回其子元素的组件，但具有更多信息。在这种情况下，子组件可以用来修改自身的宽度和高度。它“接受”的组件是其子组件（在这种情况下为<List>），返回的组件是<List>，并带有其他方面没有的额外信息。

2）在匿名函数（{height，width}）=> {...}中，height和width是要传递的对象的属性。哪个对象以及它来自哪里？

首先，在开始和结束标签之间的内容是该组件的children。这是最常见的某种JSX，是{}字符之间的纯JavaScript值。这也可以是一个功能。

因此，在这种情况下，Autosizer期望其children道具是一个函数。 Autosizer然后在渲染时调用此函数，并以width和height作为参数传递对象。

Autosizer可能具有这样的实现：

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

这意味着Autosizer具有一些内部逻辑来派生某些值，然后将那些作为函数传递的函数作为参数传递给children的Autosizer。

Answer 2

您可以找到source code here，但下面是简化版。

class AutoSizer extends React.PureComponent {
  // Do some extra stuff here
  render() {
    return (
      <div
        className={className}
        ref={this._setRef}
        style={{
          ...outerStyle,
          ...style,
        }}>
        // Call children as a function with parameters of the function it expects
        {this.props.children({ height, width })}
      </div>
    );
  }
}

所以您将AutoSizer传递给一个作为功能的孩子。 AutoSizer获得该函数作为道具，然后使用一些计算出的参数调用它。