回顾react的一般使用场景

如下所以所以，经常我们在开发项目的时候，创建每一组件，组件的第一行都会引入React，然而发现并没有使用过它。

import React, { Component } from 'react';export default class Home extends Component{    render() {        return 

}}

提出一个假想，如果不引入React会怎么样呢？程序还会不会正常的运行？

结果来了

不引入React的结果

上图就是不引入React的时候报的错误，错误的意思是React没有定义。看到这里可能就有点蒙了，既然引入的React根本没有使用，但是去掉它之后却报错了，说明该组件还是需要React的，那么它是怎么使用React的呢？

React背后的运用

React的运行机制能够解释一切，react的运行大概分成了三个阶段：

1. jsx(也就是javascript xml)对象转变成javascript对象
2. javascript对象转变成虚拟DOM对象
3. 虚拟DOM对象变成实际的DOM对象

今天这个问题的答案主要就在第一，二阶段，众所周知周知，在第一阶段其实主要用到了Babel。Babel主要的功能就是转码功能，将ES6转换成ES5。

举个例子，现在有一个函数组件：

function Home() {    return (        

)}

经过Babel转码后会变成什么呢？

"use strict";function Home() {  return /*#__PURE__*/React.createElement("div", {    className: "ele-wrapper",    onClick: function onClick() {      alert(123);    },    title: "123",    style: {      height: 30,      background: 'red'    }  }, "hello, ", /*#__PURE__*/React.createElement("span", null, "react"));}

这里似乎看到了一个熟悉的东西: React.createElement(.......)，确实React是在这里使用的，所以我们在写代码的时候从表面上是看不出来React被使用了。

另外Babel是怎么调用React的呢？

我们在React项目使用Babel的时候，主要用到了这三个：

• babel-core
• babel-preset-env
• babel-plugin-transform-react-jsx

并且通常都会创建一个.babelrc的文件，文件中内容基本都如下：

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

可以看到在使用babel-plugin-transform-react-jsx插件的时候，会需要调用React.createElement，这也就解释了为什么每个React组件页面都需要引入React的原因。