React Native语法

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。您通常不会将props描述为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。