扩展组件后的<{}>语法是什么？

Question

我今天使用react Native 0.51.0启动了一个新项目，并注意到默认项目文件的类语法添加了一些新的添加内容，<{}>语法extends Component：

之后

export default class App extends Component<{}> {
   ...
}

我尝试进行研究，但是大多数搜索引擎即使具有确切的字符串匹配也忽略了特殊字符，因此试图找出该语法被证明很困难。我进行了一些测试，并能够弄清楚这种变化出现在v0.49.0中。发行说明没有提及此添加的语法的作用。

许多模糊的关键字搜索和阅读使我相信这可能是与打字稿相关的语法，但是不熟悉该语言，我对如何搜索和了解有关无需搜索的语法而没有知道正确的术语是什么。谁能告诉我语法的名字及其有什么作用？特别是针对反应天然的。

Answer 1

它与您将在组件中收到的道具的流型有关。Component<{}>意味着您不希望该组件收到道具。

使用Flow和React.Component，您可以为道具和状态定义类型（有关详细信息，请参见React $ Component类型声明）。

有关React组件的流文档中的示例

import * as React from 'react';
type Props = { /* ... */ };
type State = {
  count: number,
};
class MyComponent extends React.Component<Props, State> {
  state = {
    count: 0,
  };
  componentDidMount() {
    setInterval(() => {
      this.setState(prevState => ({
        count: prevState.count + 1,
      }));
    }, 1000);
  }
  render() {
    return <div>Count: {this.state.count}</div>;
  }
}
<MyComponent />;