为什么每个组件的 js 文件头部都要引入 import React from 'react' ?

Question

为什么每个组件的 js 文件头部都要引入 import React from 'react' ?

Answer 1

代码中没有使用过React，必须要引用，而且必须为大写。

import React, { Component } from 'react';

class Process extends Component {

  render() {
    return (<div>哈哈哈</div>)
  }
  
}

上述代码被babel转译后：

import React, { Component } from 'react';

class Process extends Component {

  render() {
    return React.createElement(
      'div',
      null,
      '\u54C8\u54C8\u54C8'
    );
  }
}

用到了React.createElement

约定使用React，故必须引用。

Answer 2

因为每一个文件都是一个单独的模块，不引入的话不能识别文件中的React是什么，但是你可以在webpack中讲React配置为全局变量。

plugins:[
    //自动加载模块，而不必到处 import 或 require 。
    new webpack.ProvidePlugin({
      React: "React"
    })
  ]