扩展Component之后的<{}>语法是什么？

Question

我今天使用React Native 0.51.0开始了一个新项目,并注意到默认项目文件的类语法添加了一些新内容,<{}>语法extends Component如下:

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

我尝试做研究,但大多数搜索引擎都会忽略特殊字符,即使是精确的字符串匹配,所以试图找出这种语法是很困难的.我做了一些测试,并且能够发现这个变化出现在v0.49.0中.该发行说明中没有提过这是什么补充语法确实,虽然.

很多模糊的关键字搜索和阅读让我相信这可能是与TypeScript相关的语法,但是对语言不熟悉,我不知道如何搜索并找出有关语法的更多信息,而不知道是什么适当的术语是.谁能告诉我语法的名称及其作用？特别是关于React Native.

Answer 1

它与您将在组件中收到的道具的Flow类型相关.Component<{}>意味着你不希望组件接收道具.

使用Flow和React.Component,您可以定义props和state的类型(有关详细信息,请参阅React $ Component类型声明).

有关React组件的Flow 文档的示例

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 />;