React：JSX进阶

JSX In Depth

最根本上，JSX仅仅提供React.createElement(component,props, ...children)函数这样的语法糖，JSX代码：

//JSX代码
<MyButton color="blue" shadowSize={
  2}>
    Click Me
</MyButton>
//编译之后的JavaScript代码
React.createElement(
    MyButton,
    { color:"blue", shadowSize:2 },
    "Click Me"
)
//自封闭式标签风格来描述没有子元素的元素
<div className="sidebar" />
//可以编译成JavaScript代码
React.createElement(
    'div',
    { className: 'sidebar' },
    null
)

指定React元素类型

JSX标签的第一个部分指定了React元素的类型，首字母大写的标签说明了它是一个引用的React组件，这些标签会被编译称为一个命名属性的直接引用，所以如果需要使用JSX<Foo />标签，那么Foo必须要在作用域内被定义。

React必须在定义域内

如果JSX编译器调用了React.createElement，那么React库必须一直在你的JSX代码中，比如：

//下面的两个引用对于这段代码都是必须的，React和CustomButton都不是直接引用
import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
   
    return <CustomButton color="red" />
}

如果不使用打包工具，并且将React添加到script标签内，那么React就已经是一个全局变量了。

在JSX类型中使用点运算符

也可以在JSX中使用点运算符来引用一个React组件，当从一个模块中导出了许多React组件的时候，这样的使用方法非常方便，比如：

import React from 'react';
//MyComponents.DatePicker是一个组件，通过点运算符进行调用
const MyComponents = {
    DatePicker: function DatePicker(props) {
   
        return <div>Imagine a {props.color} datepicker here.</div>
    }
}

function BlueDatePicker() {
   
    return <MyComponents.DatePicker color="blue" />
}

用户自定义组件必须首字母大写

当一个元素是小写开头的时候，一般被引用为内建组件，比如<div>或者<span>，会给React.createElement传入一个字符串div或者span，而大写字母开头的组件比如：<Foo />会编译成React.createElement(Foo)并且和组件定义联系起来。
我们建议使用大写字母开头来定义组件，如果你有一个组件，并且它以小写字母开头，应该为其分配一个大写字母开头的变量。
比如：

import React from 'react';
function hello(props) {