Instrukcje importu: z lub bez React?

Question

Trochę debaty w pracy, czy konieczne jest zaimportowanie React w bezpaństwowych komponentów i nie mogę znaleźć żadnych dokumentów na ten temat. A więc:

//OPTION 1 
import React, { PropTypes } from 'react'; 

//OPTION 2 
import { PropTypes } from 'react'; 

export const Button = ({ action }) => { 
    return (
    <button onClick={action}>Submit</button> 
); 
} 

Button.propTypes = { 
    action: PropTypes.func.isRequired, 
}; 

Niektórzy twierdzą, że opcja 1 jest najlepszą praktyką podczas używania JSX; jakiś inny składnik myślowy zawiedzie z Opcją 2.

Próbowałem obu i nie widzę żadnej różnicy, komponent nadal działa w obu przypadkach.

Opcja 1 lub opcja 2: która z nich jest prawidłowa?

Answer 1

Użyj opcji 1, ponieważ babel zmieni swój JSX
<button onClick={action}>Submit</button>
do
React.createElement("button", { onClick: action }, "Submit");

tak widać reagować musi być w zasięgu. Masz dwie opcje:

1. import Reaguj z "reaguj";
2. lub zdefiniować React globalnie

Answer 2

To zależy od sposobu budowania plików. Jeśli używasz modułu bundler, takiego jak pakiet sieci Web, i nie ma pojęcia o globalnym module React, to pomijanie React spowoduje zgłoszenie błędu: React is not defined.

To dlatego, że w ten sposób:

let C = <div /> 

zamienia:

let C = React.createElement("div", null) 

Więc wewnątrz danego modułu .. React nie są importowane, a więc zadziała na niezdefiniowanej zmiennej.

Możesz wystawić React na przestrzeń nazw okna, wtedy nie musisz importować go do każdego pliku. To zależy od Ciebie.