React Native＆lt; {}＆gt;句法

Question

我使用react-native init创建了一个新的React Native项目，在生成的模板中，主要组件类如下所示：

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

我真的不明白<{}>部分是什么意思。我以前从未见过这个，所有的例子似乎都省略了它。只是好奇它的目的是什么以及是否有必要。

Answer 1

使用typescript时，必须指定预期的值类型。这允许在编译期间检测不匹配属性并减少错误量。

因此当您执行Component<{}>时，{}是Props的类型，您的组件将会收到。

这就是React的Component课程的样子：

如果您注意到，则类型为<P, S>，代表<Props, State>。

另一个名为ComponentClass的界面有一个签名<P>，

在内部初始化一个新组件，状态为any。此接口用于ReactElement's type：

总而言之，您正在定义一个不接受任何道具且可以具有任何类型状态的Component。这通常是在您不确定组件的交互时完成的。

理想情况下，组件应如下所示：

interface IComponentState {
  ...
}

interface IComponentProps {
  ...
}

export class MyComponent<IComponentProps, IComponentState> extends React.Component {
  ...
}

这会强制消费者传递任何必要的属性并强制您拥有适当的状态值。

Answer 2

这是Flow的Typescript。您通常不会将道具描述为propTypes，而是将其描述为接口或类型。然后将类型作为泛型传递给React.Component。

道具的类型是传递的类型加上{ children?: ReactNode }

实际上有两个通用参数，第二个用于State

非常有用和方便的东西。

https://www.typescriptlang.org/docs/handbook/generics.html https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Answer 3

这些是流类型注释。见https://flow.org/ 您会注意到文件顶部有@flow个注释，项目根目录中有.flowconfig个文件。

在这里使用flow是可选的，但它可以帮助你捕获bug。