react组件为何区分大小写

在react开发中，jsx是重要的语法，但浏览器并不能识别jsx代码，所以需要通过Babel等工具将其转换为浏览器可执行的JavaScript代码。

在转换的过程中，会发生两种情况，一种就是我们需要转换的代码是一个html原生dom，另一种则是封装后的react组件

当传入的jsx是一个原生dom对象时

例： 

<div>
  <span></span>
</div>

这时候babel转换出的js为

React.createElement("div", null, React.createElement("span", null));

由此可见，当jsx为dom时，React.createElement的第一个参数会是一个字符串，而当书写一个react组件时

例： 

function Custom () {

}
<Custom>
  <span></span>
</Custom>

这时候babel转换出的js为

function Custom() {}
React.createElement(Custom, null, React.createElement("span", null));

 由此可见，当jsx为组件时，React.createElement的第一个参数会是一个变量

因此，当书写的组件首字母为小写时，React.createElement会将其当作原生dom对象创建出来