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.

javascript reactjs react-native

— marco
źródło

Czy na pewno jest to plik JS? To wygląda jak maszynopis.

— Phix

@Phix Myślę, że używa Flow

— marco

ahh ma sens.

— Phix

Odpowiedzi:

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

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)

— Lukáš Gibo Vaic
źródło

Maszynopis byłby ReactNodebez$

— Tomasz Błachut

Widzę, że próbka React Native używa Flow. Ale w Flow nie znajduję żadnej dokumentacji React$Node. Czy możesz mi pomóc wyjaśnić ten punkt?

— marco

ok @ marco mój zły jego Flow, nie maszynopis, ale jak wspomniałem w mojej odpowiedzi Węzeł React jest w zasadzie dowolnym elementem, który można renderować, umieści całą odpowiedź w odpowiedzi.

— Lukáš Gibo Vaic

w porządku, ale wciąż coś mi brakuje React$Node(znak dolara ...), to znaczy, w Flow doc nie ma na to odniesienia

— marco

@marco naprawiło odpowiedź, ReactNode nie pochodzi z Flow, jest to jedyna definicja przepływu dla określonego typu React

— Lukáš Gibo Vaic

React $ Node jest typem zdefiniowanym w React.js

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

— Сантомас
źródło

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.

— Teju
źródło