const App: () => React$Node = () => {...}: 这个指令是什么意思？答案

【问题标题】：const App: () => React$Node = () => {...}: what does it mean this instruction?const App: () => React$Node = () => {...}: 这个指令是什么意思？
【发布时间】：2020-02-05 03:46:40
【问题描述】：

在react-native init ProjectName 上，主应用文件App.js 包含以下方式的组件声明：

const App: () => React$Node = () => {...}

这条指令是什么意思？

我的意思是，我习惯了组件定义为const App = () => {...}，所以我不明白，特别是: () => React$Node之间的表达式。

【问题讨论】：

你确定是JS文件吗？这看起来像打字稿。
@Phix 我认为它正在使用 Flow
嗯，有道理。

标签： javascript reactjs react-native

【解决方案1】：

它的类型定义来自Flow，表示常量App是函数类型，返回ReactNode。

这意味着函数 App 可以返回，任何有效的 JSX（反应原生它的任何东西，来自 View、Text、.etc）、ReactFragment、React.Portal、boolean、null、undefined

如果您对美元符号感到困惑，这里有一个解释链接。 https://www.saltycrane.com/flow-type-cheat-sheet/latest/

名称中带有 $ 的“私有”或“魔术”类型有单独的部分。请参阅此处的注释并在此处发表评论。更新：现在这里记录了其中一些类型。

为了简单起见，您可以将其视为 React 中的 Node（将其视为范围/命名空间）

【讨论】：

Typescript 将是 ReactNode，没有 $
我看到示例 React Native 使用了 Flow。但我在 Flow 中没有找到任何关于 React$Node 的文档。你能帮我澄清一下吗？
ok @marco 我的流程不好，不是打字稿，但正如我在回答中提到的那样，React 节点基本上是您可以渲染的任何元素，会将整个定义放入回答中。
很好，但我仍然想念React$Node（美元符号...），我的意思是，在 Flow doc 中没有任何提及它
@marco 修复了答案，ReactNode 不是来自 Flow，它是 React 特定类型的唯一 Flow 定义

【解决方案2】：

React$Node 是 react.js 中定义的类型

declare type React$Node =
  | null
  | boolean
  | number
  | string
  | React$Element<any>
  | React$Portal
  | Iterable<?React$Node>;

【讨论】：

【解决方案3】：

它也是一种将App组件声明为函数的类型，但你可以将其更改为

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>Hello World!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

别忘了去掉最后一行的Export default App语句。

【讨论】：