摘要：原本是有自己的來負(fù)責(zé)的解析，不過現(xiàn)在已經(jīng)停止更新，語(yǔ)法完全依賴進(jìn)行解析。關(guān)于上面的幾個(gè)轉(zhuǎn)碼的結(jié)果的解釋都在下面的源碼中這里可以發(fā)現(xiàn)，支持，但是比如就一定會(huì)報(bào)錯(cuò)了，雖然看起來與一樣

首先jsx絕不是一個(gè)新的語(yǔ)言，我覺得他僅僅是js的超集，或者只是一種語(yǔ)法糖。原本FB是有自己的jsx-transform來負(fù)責(zé)jsx的解析，不過現(xiàn)在已經(jīng)停止更新，jsx語(yǔ)法完全依賴babel進(jìn)行解析。

babel在識(shí)別jsx的時(shí)候，會(huì)將標(biāo)簽直接作為AST的node，然后轉(zhuǎn)化

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

將被babel轉(zhuǎn)化為

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

這里為了方便和閱讀對(duì)es6的轉(zhuǎn)化，暫時(shí)忽略。

還是針對(duì)上面的代碼，來看一下babylon AST的解析結(jié)果，只包含return部分
整個(gè)標(biāo)簽部分是JSXElement
其中會(huì)有三個(gè)部分openingElement，closingElement和children，屬性則會(huì)成為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節(jié)點(diǎn)最后會(huì)被替換為createElement的形式，也就是說不管怎么用jsx，其實(shí)也就只是一種語(yǔ)法糖，與createElement的寫法無異

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

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

核心也就是openingElement

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

那么ListSourceComponent是JSXIdentifier的name

整個(gè)代碼的結(jié)果也就是

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

其實(shí)在轉(zhuǎn)碼的階段是否將JSXMemberExpression的name或者對(duì)象的首字母大寫是不重要的，真的導(dǎo)致報(bào)錯(cuò)的也不過是在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.

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

這個(gè)和上面的例子相關(guān)就是dot notation在jsx中的解析

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

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

上面兩段代碼都不會(huì)導(dǎo)致錯(cuò)誤，原因就是在解析JSXIdentifier的結(jié)果會(huì)是一組對(duì)象和屬性，所以轉(zhuǎn)碼結(jié)果一定不是字符串而是obj.pro

上面說到了在構(gòu)建ast的過程中大小寫并不進(jìn)行區(qū)分，而是在@babel/plugin-transform-react-jsx中進(jìn)行變化。
關(guān)于上面的幾個(gè)轉(zhuǎn)碼的結(jié)果的解釋都在下面的源碼中

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

這里可以發(fā)現(xiàn)，react支持dot notation，但是比如

就一定會(huì)報(bào)錯(cuò)了，雖然看起來與

一樣