const App: () => React $ Node = () => {…}: co to znaczy ta instrukcja?

on react-native init ProjectName, główny plik aplikacji App.jszawiera deklarację komponentu w następujący sposób:

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

Co to znaczy ta instrukcja?

Mam na myśli, jestem przyzwyczajony do komponentu zdefiniowanego jako const App = () => {...}, więc nie rozumiem w szczególności wyrażenia pomiędzy : () => React$Node.

Jego definicja typu z Flow oznacza, że ​​stała App ma funkcję typu i zwraca ReactNode.

ReactNode jest jednym z tych typów: ReactChild | ReactFragment | ReactPortal | boolean | null | undefined

Oznacza to, że funkcja App może zwrócić dowolny poprawny JSX (w native reaguje na to wszystko z View, Text, .etc), ReactFragment, React.Portal, boolean, null, undefined

Jeśli masz wątpliwości co do znaku dolara, oto link z wyjaśnieniem. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Istnieją osobne sekcje dla typów „prywatnych” lub „magicznych” z $ w nazwie. Zobacz notatkę tutaj i skomentuj tutaj. Aktualizacja: niektóre typy są teraz udokumentowane tutaj.

Dla ułatwienia możesz myśleć o tym jak o Nodepochodzeniu React(pomyśl o tym jako o zasięgu / przestrzeni nazw)

React $ Node jest typem zdefiniowanym w React.js

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

Jest to również rodzaj deklaracji składnika aplikacji jako funkcji, ale można go zmienić na

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
    }
});

Nie zapomnij usunąć oświadczenia Eksportuj domyślną aplikację w ostatnim wierszu.