javascript - 理解 Meteor 中的 withtracker() 组件

Question

我正在尝试学习 meteor ，但对这种 HOC 模式不是很熟悉(它是带有反应的 meteor.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 component wrapped by this HOC

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

官方文档也是这样说的

The wrapped App component fetches tasks from the Tasks collection and supplies them to the underlying App component it wraps as the tasks prop. It does this in a reactive way, so that when the contents of the database change, the App re-renders, as we'll soon see!

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

具体什么是包装的App组件获取任务并将其提供给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);

meteor HOC 会稍微复杂一点，但思路是一样的。它接收对 meteor 任务存储的引用，并将返回一个组件，只要存储中的数据发生变化，该组件就会重新呈现输入组件，并将数据添加到该组件的属性中。