摘要：原本是有自己的來負責的解析，不過現在已經停止更新，語法完全依賴進行解析。關于上面的幾個轉碼的結果的解釋都在下面的源碼中這里可以發現，支持，但是比如就一定會報錯了，雖然看起來與一樣

首先jsx絕不是一個新的語言，我覺得他僅僅是js的超集，或者只是一種語法糖。原本FB是有自己的jsx-transform來負責jsx的解析，不過現在已經停止更新，jsx語法完全依賴babel進行解析。

babel在識別jsx的時候，會將標簽直接作為AST的node，然后轉化

class Square extends React.Component {
  render() {
    return (
      
        {this.props.value}
      
    );
  }
}

將被babel轉化為

class Square extends React.Component {
  render() {
    return React.createElement(
      "button",
      { className: "square" },
      this.props.value
    );
  }
}

這里為了方便和閱讀對es6的轉化，暫時忽略。

還是針對上面的代碼，來看一下babylon AST的解析結果，只包含return部分
整個標簽部分是JSXElement
其中會有三個部分openingElement，closingElement和children，屬性則會成為openingElement的JSXAttribute

jsx在babel的定義

defineType("JSXElement", {
  builder: ["openingElement", "closingElement", "children", "selfClosing"],
  visitor: ["openingElement", "children", "closingElement"],
  aliases: ["JSX", "Immutable", "Expression"],
  fields: {
    openingElement: {
      validate: assertNodeType("JSXOpeningElement"),
    },
    closingElement: {
      optional: true,
      validate: assertNodeType("JSXClosingElement"),
    },
    children: {
      validate: chain(
        assertValueType("array"),
        assertEach(
          assertNodeType(
            "JSXText",
            "JSXExpressionContainer",
            "JSXSpreadChild",
            "JSXElement",
            "JSXFragment",
          ),
        ),
      ),
    },
  },
});

AST的jsx節點最后會被替換為createElement的形式，也就是說不管怎么用jsx，其實也就只是一種語法糖，與createElement的寫法無異

為了更好的理解jsx，那我解釋一段最近看到的代碼

methodsParamsList.map((ListSourceComponent, index) => {
       return 
})

核心也就是openingElement

在babel的眼里他做為Element有兩個部分，名字和屬性，屬性不多說了。
ListSourceComponent.component會被認為是JSXMemberExpression，ListSourceComponent是JSXIdentifier的對象component則是屬性
如果是

那么ListSourceComponent是JSXIdentifier的name

整個代碼的結果也就是

 methodsParamsList.map((ListSourceComponent, index) => {
      return React.createElement(ListSourceComponent.component, { index: index + 1 });
    });

其實在轉碼的階段是否將JSXMemberExpression的name或者對象的首字母大寫是不重要的，真的導致報錯的也不過是在createElement中

createElement()
React.createElement(type, [props],[...children])
Create and return a new React element of the given type. The type argument can be either a tag name string (such as "div" or "span"), or a React component type (a class or a function).
Code written with JSX will be converted to use React.createElement(). You will not typically invoke React.createElement() directly if you are using JSX. See React Without JSX to learn more.

在剛學react的時候，老師就說過react component需要大寫，react會把大寫開口的作為react的組件，不然則會使普通的html dom，比如div，span
首先是不是在解析ast的時候就把大小寫分開處理了，答案是否定的，在定義openingElement的type的時候完全沒有對這個進行判斷，不管是大寫，小寫均作為string，是element的type
但是在babel的結果里可以看到
React.createElement("div", ...)
React.createElement( Div, ...)
這兩種結果帶來的就是Div這個是一個字符串還是變量名，如果自己不慎寫了個小寫的component名，那么一個并不是html標簽的字符串必然會造成錯誤
這里必須穿插一個JSX dot notation

這個和上面的例子相關就是dot notation在jsx中的解析

methodsParamsList.map((ListSourceComponent, index) => {
       return 
    })

methodsParamsList.map((listSourceComponent, index) => {
       return 
    })

上面兩段代碼都不會導致錯誤，原因就是在解析JSXIdentifier的結果會是一組對象和屬性，所以轉碼結果一定不是字符串而是obj.pro

上面說到了在構建ast的過程中大小寫并不進行區分，而是在@babel/plugin-transform-react-jsx中進行變化。
關于上面的幾個轉碼的結果的解釋都在下面的源碼中

  const createIdentifierParser = (id: string) => () => {
    return id
      .split(".")
      .map(name => t.identifier(name))
      .reduce((object, property) => t.memberExpression(object, property));
  };

這里可以發現，react支持dot notation，但是比如

就一定會報錯了，雖然看起來與

一樣