怎麼理解 "JSX 表達式總是會當作 ReactElement 執行" ?

在 reactjs 官方文檔中看到一個提示

&> 注意:

JSX 表達式總是會當作 ReactElement 執行。具體的實際細節可能不同。一種優化 的模式是把 ReactElement 當作一個行內的對象字面量形式來繞過React.createElement 里的校驗代碼。

不知道怎麼理解

---

意思就是，不管JSX怎麼寫，最後都是轉化為React.createElement這樣的表達式，產生的是一個對象。

比如JSX這麼寫

&Hello world &React User&&

最後實際產生的JavaScript是這樣。

React.createElement(
"div",
null,
"Hello world ",
React.createElement(
"span",
null,
"React User"
)
);


你看，是嵌套的React.createElement調用，所以啊，在JSX中不能寫for或者while這樣的語句，因為for/while沒法插入到單純的表達式中，只能用map產生數組。

---

翻譯有點暈，不如看原文

Note:

The JSX expression always evaluates to a ReactElement. The actual implementation details may vary. An optimized mode could inline the ReactElement as an object literal to bypass the validation code in React.createElement.

這裡描述的就很簡單一個事實，jsx 會被轉換成 React.createElement() 調用，而這個函數調用返回的是 js plain object，那麼可以用 object literal 來代替函數調用來達到性能優化的目的。

具體見我的另一個答案。

https://www.zhihu.com/question/41900814/answer/92775518

---

JSX在react中，就是React.createElement這個API的語法糖。

開發階段，js中的JSX本質上是無法被識別執行的，是為了優化在js中編寫類似html的模板代碼而創造的一種DSL。最終被執行的react代碼實際上是經過webpack之類的打包工具經過一系列工具轉義後的js，css和html。其中就有負責轉義JSX的工具。而在React中，JSX部分的代碼就會被轉義為一些列的React.createElement...，而這個API最終返回的就是ReactElement。

所以，對於React而言，JSX表達式總是會當做ReactElement執行，JSX就是React.createElement的語法糖

---

推薦閱讀：