了解 Meteor 中的 withtracker() 组件

Question

我正在尝试学习流星，但对这种 HOC 模式不太熟悉（它是带有 react 的流星.js）。

我正在阅读他们的官方教程文档。这是他们所做的 (You can click here to visit the page)

他们在 App.js 中导入了以下包

import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data'; 
import { Tasks } from '../api/tasks.js';

然后有一个简单的类 App extends 组件被这个 HOC 包裹

export default withTracker(() => {
  return {
    tasks: Tasks.find({}).fetch(),
  };
})(App);

官方文档也是这样说的

封装的 App 组件从 Tasks 集合中获取任务并 将它们提供给它作为任务包装的底层 App 组件 支柱。它以一种反应的方式做到这一点，所以当 数据库更改，应用程序重新渲染，我们很快就会看到！

现在这种语言对我来说并不完全陌生，但我很难理解和理解它。那么有人可以给我解释一下吗？

具体来说是什么被包裹的App component获取任务并将其提供给underline app组件

Answer 1

高阶组件最基本的形式是一个函数，它接受一个组件类型作为输入并返回一个组件类，该组件类包装了输入组件并为其添加功能。

通常，签名是一个函数，它将参数应用于包装组件，该组件返回如上所述的 HOC，因此您可以将它与多个组件一起使用。

这是一个非常基本的示例，如果使用它的组件或其任何子组件抛出异常，则会显示错误消息：

const catchError = ({ errorMessage }) => InputComponent => class extends Component {
  render() {
       try {
        return <InputComponent {...this.props} />;
       } catch {
          return <div>{errorMessage}</div>
       }
  }
}

const ComponentWithErrorMessage = catchError({ errorMessage: 'Whoops!' })(MyComponent);

// This is the same as the following, the first just immediately invokes the returned function
const whoopsErrorHoc = catchError({ errorMessage: 'Whoops!' });
const ComponentWithWhoopsError = whoopsErrorHoc(MyComponent);

流星 HOC 会稍微复杂一些，但想法是一样的。它接收对流星任务存储的引用，并将返回一个组件，当存储中的数据发生更改时，该组件会重新渲染输入组件，并将数据添加到该组件的 props 中。