理解 Meteor 中的 withtracker() 组件

Question

我正在尝试学习 meteor 并且不太熟悉这种 HOC 模式（它是 meteor.js 和 React）。

我正在浏览他们的官方教程文档。这是他们所做的 (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';

然后有一个简单的操作class 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 component 获取任务并将其提供给 underline app 组件

Answer 1

高阶组件的最基本形式是一个将组件类型作为输入的函数，return是一个包装输入组件并向其添加功能的组件class。

通常，签名是一个函数，它接受参数以应用于包装组件，return如上所述，它是一个 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 Task 存储的引用，并将 return 一个组件，只要存储中的数据发生变化，该组件就会重新呈现输入组件，并将数据添加到该组件的道具中。

理解 Meteor 中的 withtracker() 组件

Understanding withtracker() component in Meteor

javascript

meteor

reactjs