Dlaczego należy importować wiele razy React w komponentach nadrzędnych i potomnych?

Question

Jeśli masz plik komponentu nadrzędnego, który już importuje React, dlaczego któryś z jego renderowanych plików podrzędnych musi również zostać zaimportowany do React? Czy jest to tylko środek bezpieczeństwa na wypadek, gdyby te dzieci były kiedykolwiek wydawane w innym miejscu, gdzie React nie został jeszcze zaimportowany?

Answer 1

W pliku nodejs każdy plik jest modułem, który ma własny zakres zmiennych. Po zaimportowaniu zmiennej do pliku (na przykład React) dodajesz tę zmienną do zakresu modułu, ale nie do zakresu globalnego.

W przypadku webpack można użyć providePlugin łatwo dokonać React zmienna globalna:

new webpack.ProvidePlugin({ 
    React: 'react' // ReactJS module name in node_modules folder 
}) 

Po tym jesteś w stanie pominąć importowanie React zmienną we wszystkich modułach. Webpack zrobi to w razie potrzeby.

Answer 2

Jeśli używasz JSX i babel, trzeba importować React w każdym pliku, ponieważ babel-preset-react będzie transpile kod JSX do React.createElement() połączeń, więc ten kod

const Foo =() => <h1>Test</h1>; 

będzie

var Foo = function Foo() { 
    return React.createElement(
    "h1", 
    null, 
    "Test" 
); 
}; 

DEMO : Babel REPL

to jest rea syn, dlaczego React powinien być dostępny w odpowiednim zakresie i jednym ze sposobów to zrobić, jest zaimportować React w pliku.

Answer 3

Powodem jest to, aby uniknąć niepotrzebnych skompilowany kod JavaScript, który nie trzeba kompilować JSX. Na przykład, masz plik, który ma funkcję do dodawania, lub jakąkolwiek funkcję, która nie wymaga kompilacji jsx, wtedy nie wstawiaj importuj Reaguj z "reaguj" na górze tego pliku. Pozwoli to zaoszczędzić czas kompilacji.

Answer 4

Źródłem pytania jest zarządzanie zależnościami - w jaki sposób ja, autor, opisuję i uzyskujemy zewnętrzne zależności, których potrzebuję w mojej "rzeczy" (aplikacja/komponent/moduł), aby mogła wykonywać swoją pracę?

JavaScript korzyści (lub cierpi) z konieczności globalną przestrzeń nazw, w których zależności mogą być wstrzykiwana. Chociaż może to często uprościć zarządzanie zależnościami w krótkim okresie czasu (np. Możesz go zignorować i oczekiwać, że wszystko, czego potrzebujesz, będzie dostępne w globalnej przestrzeni nazw), może często powodować problemy, gdy aplikacja rośnie i ulega zmianom. Na przykład, biorąc pod uwagę aplikację z wieloma współtwórcami, można zdecydować się na zmianę części aplikacji, aby nie używać określonej zależności, a zatem ją usunąć. Jeśli inna część aplikacji go potrzebowała, ale ta zależność nie została formalnie zadeklarowana nigdzie, można ją łatwo pominąć.

Aby dobrze zarządzać zależnościami, każda dyskretna "rzecz" powinna opisywać swoje zależności niezależnie od innych "rzeczy", tak aby można było bezpiecznie używać w dowolnym kontekście. Zapewnia to, że każda "rzecz" ma dokładnie to, czego potrzebuje, bez względu na to, w jaki sposób jest używana i jaki jest jej "rodzic" (kod importujący "rzecz").

Alternatywą dla tego podejścia jest zastrzyk zależności. W tym modelu "rzecz" zapewnia interfejs do przekazywania zależności w "rzecz" od konsumenta. Istnieją do tego zalety elastyczności i sprawdzalności, które są poza zakresem twojego pytania.:)

// export a function that expects the React and PropTypes 
// dependencies to be injected as parameters and returns 
// the component rather than importing the dependencies 
// and exporting the component 
export default (React, PropTypes) => { 
    return class extends React.Component { 
    static propTypes = { 
     name: PropTypes.string.isRequired 
    } 
    render() { 
     return (
     <div /> 
    ); 
    } 
    }; 
}; 

Wszystko to znaczy, że jest to "środek bezpieczeństwa", aby każda "rzecz" importowała swoje własne zależności. Pozwala bezpiecznie odnawiać kod bez obciążania kognitywnego, pamiętając, co zapewnia te zależności.