Question

我正在尝试学习流星，但对这种HOC模式不是很熟悉（它是带有react的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扩展此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: 'Woops!' })(MyComponent);

// This is the same as the following, the first just emediately invokes the returned function
const woopsErrorHoc = catchError({ errorMessage: 'Woops!' });
const ComponentWithWoopsError = woopsErrorHoc(MyComponent);

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

了解流星中的withtracker（）组件

1 个答案: