为什么每个react组件都需要import React from 'react'？

在定义React组件或者书写React相关代码，不管代码中有没有用到React这个对象，我们都必须将其import进来

import React from 'react';    // 下面的代码没有用到React对象，为什么也要将其import进来
import ReactDOM from 'react-dom';

ReactDOM.render( <App />, document.getElementById( 'editor' ) );

关于这个问题，我们看一下打包工具的.babelrc文件就全明白了

{
    "presets": ["env"],
    "plugins": [
        ["transform-react-jsx", {
            "pragma": "React.createElement"
        }]
    ]
}

因为打包工具是需要React.createElement这个方法把你写的jsx转化为虚拟DOM的，就像这样

import React from './react'
import ReactDOM from './react-dom'

class App extends React.Component {
    render() {
        return <h1>Hello,World!</h1>
    }
}

const element = ( <div className="123">
    <span>hello</span>
    <div>world</div>
</div>
)
console.log('element', element)


ReactDOM.render(
    <App />,
    document.getElementById( 'root' )
);

为什么每个react组件都需要import React from 'react'？

推荐阅读更多精彩内容