React入門的的時候，我們（我自己啦）喜歡都跟著例子來，用標簽的語法寫JSX，比如：<Mycomponent key={this.props.id} onClick={this.props.doSth} ></Mycomponent >

覺得真是在js裏寫html。

現在文檔告訴我們，JSX這種寫法呀，其實是React.createElement(component, props, ...children)的語法糖，就好像類是創建對象的語法糖一樣。

三個參數分別是其類型、屬性、子元素。子元素部分可以是嵌套的數組、對象或文本。如果沒有子元素，其JSX語法可以直接寫成<Mycomponent />

1.無論是JSX語法還是createElement函數，Mycomponent這個名字在當前作用域必須可見，否則無法解析。

2.JSX語法允許類js對象的點語法：

1 const MyComponents = {
2   DatePicker: function DatePicker(props) {
3     return <div>Imagine a {props.color} datepicker here.</div>;
4   }
5 }

如上，當一個模塊當中包含多個組件的定義時，如果我們想取用其中的某個組件，可以用<MyComponents.DatePicker /> 來調用組件。畢竟MyComponents是以對象形式來聚合各個組件的定義的。這種方式也方便我們按類型/功用將組件進行分類。

3.用戶自定義的組件要用首字母大寫的方式命名，這是推薦的。這方便ianReact將之與原聲的html標簽區分。按照規範，原生html標簽要小寫。

4.自定義組件名不能用js表達式/變量，應當在使用如果需要按條件確定使用哪個組件，前先確定組件名再使用它。

 1 const components = {
 2   photo: PhotoStory,
 3   video: VideoStory
 4 };
 5 
 6 function Story(props) {
 7   // Correct! JSX type can be a capitalized variable.
 8   const SpecificStory = components[props.storyType];
 
 9   return <SpecificStory story={props.story} />;
10 }

5.JS表達式可以作為props傳給組件，但必須用{}包裹。

6.將字符串當作props傳給組件時，下面兩種方式等價：

1 <MyComponent message="hello world" />
2 
3 <MyComponent message={‘hello world‘} />

7.當一個變量未賦值卻當作props傳給組件時，默認為布爾值true。然而這是不推薦的。因為在ES6的對象簡寫語法把這種情況看作{autocomplete:autocomplete}

1 <MyTextBox autocomplete />
2   //等於
3 <MyTextBox autocomplete={true} />

8.可以用擴展操作符將對象的屬性props給組件：

1 function App2() {
2   const props = {firstName: ‘Ben‘, lastName: ‘Hector‘};
3   return <Greeting {...props} />;
4 }

然而這是不推薦的，因為可能會把不相關的多余屬性傳給組件。

9.在自定義組件的開始標簽和閉合標簽之間的內容，會被當作組件的props.chidlren。

10.JSX會自動清除一行收尾的空白、把多余的空行刪掉，並把斷行當作一個空格。

11.在自定義組件的標簽內部，我們可以通過字符串字面量組合更多（自定義）標簽，其實就是用JSX語法來組織。

12.JS表達式作為子內容children的情況：function Hello(props) { return <div>Hello {props.addressee}!</div>; }

文檔給的例子都是作為標簽內部的文本。

13.函數也可以作為子內容children：

1  return (
2     <Repeat numTimes={10}>
3       {(index) => <div key={index}>This is item {index} in the list</div>}
4     </Repeat>
5   );

代碼第三行本身是一個數組，在{}中，用函數將它映射為一組html元素。所以，“函數作為子內容”本質上是“函數生成的元素作為子內容”。

14.Booleans, Null, and Undefined Are Ignored

意思是，如果內容為以上的值，將不作顯示。

 1 <div />
 2 
 3 <div></div>
 4 
 5 <div>{false}</div>
 6 
 7 <div>{null}</div>
 8 
 9 <div>{undefined}</div>
10 
11 <div>{true}</div>

以上的結果都是一個空的div，作為js表達式的這幾個值都不會被打印出來。

然而，數字0不一樣，它會被打印。因此，如果遇到用數組的length來做判斷，必須把它轉化為布爾值，比如 arr.length>0。

15.如果我們想將js表達式{true|false|null|undefined} 中的這幾個值打印出來，就得將它轉化為字符，{String(true)}.

這幾條記住就可以了。

React:JSX 深入