Importazione dichiarazioni: con o senza React?

Question

C'è un piccolo dibattito sul fatto che sia necessario importare React in componenti senza stato e non riesco a trovare alcun documento a riguardo. Quindi:

//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, 
}; 

Alcune persone dicono che l'opzione 1 è la procedura migliore quando si utilizza JSX; qualche altro componente pensano fallirà con l'opzione 2.

ho provato entrambi e non riesco a vedere alcuna differenza, il componente funziona ancora in entrambi i casi.

Opzione 1 o Opzione 2: quale è corretta?

Answer 1

Utilizzare l'opzione 1 perché babel trasformerà il vostro JSX
<button onClick={action}>Submit</button>
a
React.createElement("button", { onClick: action }, "Submit");

Quindi, come si vede reagire deve essere portata. Avete due opzioni:

1. import Reagire da "reagire";
2. o definire React globalmente

Answer 2

Dipende dalla modalità di creazione dei file. Se stai usando un bundler di moduli come il webpack e non c'è la nozione di un modulo React globale, lasciandolo fuori React genererà l'errore React is not defined.

Questo è perché questo:

let C = <div /> 

si trasforma in:

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

Quindi all'interno di quel particolare modulo .. React non viene importata e quindi scatterà sulla variabile non definita.

È possibile esporre React allo spazio dei nomi finestra, quindi non c'è bisogno di importare in ogni file. Dipende da te.