0

据我了解并遵循文档，HOC 是一个函数，它接受一个组件并返回一个新组件。一个例子是 react-redux 的函数 connect：

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

我使用AutosizerfromReact-virtualized并在其文档中找到了下一个定义：

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

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

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 中的连接相同的方式返回另一个组件的函数。

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

4

2 回答 2

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将该函数作为道具获取，然后使用一些计算参数调用它。

于 2020-03-02T19:27:27.090 回答
1

另一种思考方式是，高阶组件比它们的子组件具有更高的顺序（意味着它们更接近 DOM 节点树的根），并且它们通过修改或向其子组件提供额外信息来渲染其子组件。

1) 为什么 Autosizer 是 HOC？

将其视为返回其子级但带有额外信息的组件会更有用。在这种情况下，子组件可以用来修改自己的宽度和高度。

但从技术上讲，在源代码中，它确实返回了一些围绕您传入的子代的包装 JSX。因此，它“采用”的组件是它的子代（在这种情况下<List>），它返回的组件是一个<div>带有内容的组件，然后它会将您<List>放入其中在提供额外信息的同时，它不会有其他明智的选择。

connect因此，它与接受一个组件，然后返回注入了额外 props 的组件并没有太大不同，否则它就会有。

但它是否是 HOC 在这里并不重要。它是一个期望返回 JSX 作为其children. 这是重要的一点。

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

首先，无论打开标签和关闭标签之间的内容是该组件的children. 这是最常见的某种 JSX，{}字符之间的纯 javascript 值。这也可以是一个函数。

所以在这种情况下，Autosizer期望它的childrenprop 是一个函数。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
  })
}

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

这种模式称为渲染道具。React在这里有关于它的文档。

这是一个简单 HOC 的简单示例，它通过 render prop 为其子级提供窗口大小。

于 2020-03-02T19:26:29.100 回答