JSX
1.jsx它既不是字符串也不是html語言；它是javascript的擴(kuò)展；
2.jsx會讓人想起時模板，但它又具備Javascript的所有功能；
（個人理解：jsx是定義React的elements即html標(biāo)簽和屬性不需要 引號包裹，屬性的值用{js表達(dá)式}；）
3.可以將Javascript表達(dá)式嵌入到j(luò)sx中，用{js表達(dá)式}將表達(dá)式包裹起來
1.Javascript表達(dá)式嵌入到j(luò)sx中;
html中需要引入js：
<script src="../js/react.js" type="text/javascript"></script>
<script src="../js/react-dom.js" type="text/javascript"></script>
<script src="../js/browser.min.js" type="text/javascript"></script>
<script type="text/babel">
const user = {
"firstName":"react",
"lastName" : "女士"
}
function formatterName(user) {
return user.firstName +' '+user.lastName
}
const ele = <h1>{formatterName(user)}</h1>;
ReactDOM.render(ele,document.getElementById('root'));
</script>
2.JSX作為表達(dá)式
//修改formatterName：
function formatter(user) {
return <h1>{user.firstName +' '+user.lastName}</h1>
}
ReactDOM.render(formatter(user),document.getElementById('root2'));
3.屬性指定值，html的嵌套
4.JSX防止注入攻擊（[XSS (cross-site-scripting]）
5.創(chuàng)建JSX:
React.createElement(type,props,children);type:標(biāo)簽類型，props:{標(biāo)簽的屬性}，children：標(biāo)簽的文本
const c = React.createElement('h1',{className:'f'},'hello,創(chuàng)建元素')
ReactDOM.render(c,document.getElementById('root3'))
Render Element
element是react應(yīng)用程序的最小構(gòu)建模塊；
element描述的是你想在屏幕上看到的東西；
react element和瀏覽器的Dom元素不太類似，React Elemtent只是一個普通的對象，它更關(guān)心的是更新DOM對象去適配react Element；
a.渲染dom元素
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
b.更新React element
React Element是一旦被創(chuàng)建是不可以被改變，它就像電影里的動畫，某個時間點代表莫以和畫面；到目前為止，根據(jù)我們目前的知識，想要更新React Dom,唯一的方法就是創(chuàng)建一個元素并且通過React.render()進(jìn)而更新;
eg:定時的例子：
function setTime() {
const e = (<div><h2>計時器：</h2> <p>{new Date().toLocaleTimeString()}</p></div>);
ReactDOM.render(e,document.getElementById('clock'));
}
setInterval(setTime,1000);
注意：實際上，在實際的react應(yīng)用程序中，React.Render()只調(diào)用一次。把代碼封裝到有狀態(tài)的組件中進(jìn)行使用。這種方法接下來會相關(guān)的介紹；
c.React只更新有必要的元素
React DOM會與上一個元素進(jìn)行比較，React DOM元素的更新只應(yīng)用于有更新狀態(tài)的DOM元素；
可以通過瀏覽器工具檢查上個例子的變化進(jìn)行驗證；
