JSX
1.jsx它既不是字符串也不是html语言；它是javascript的扩展；
2.jsx会让人想起时模板，但它又具备Javascript的所有功能；
（个人理解：jsx是定义React的elements即html标签和属性不需要 引号包裹，属性的值用{js表达式}；）
3.可以将Javascript表达式嵌入到jsx中，用{js表达式}将表达式包裹起来
1.Javascript表达式嵌入到jsx中;
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作为表达式
//修改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.创建JSX:
React.createElement(type,props,children);type:标签类型，props:{标签的属性}，children：标签的文本
const c = React.createElement('h1',{className:'f'},'hello,创建元素')
ReactDOM.render(c,document.getElementById('root3'))
Render Element
element是react应用程序的最小构建模块；
element描述的是你想在屏幕上看到的东西；
react element和浏览器的Dom元素不太类似，React Elemtent只是一个普通的对象，它更关心的是更新DOM对象去适配react Element；
a.渲染dom元素
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
b.更新React element
React Element是一旦被创建是不可以被改变，它就像电影里的动画，某个时间点代表莫以和画面；到目前为止，根据我们目前的知识，想要更新React Dom,唯一的方法就是创建一个元素并且通过React.render()进而更新;
eg:定时的例子：
function setTime() {
const e = (<div><h2>计时器：</h2> <p>{new Date().toLocaleTimeString()}</p></div>);
ReactDOM.render(e,document.getElementById('clock'));
}
setInterval(setTime,1000);
注意：实际上，在实际的react应用程序中，React.Render()只调用一次。把代码封装到有状态的组件中进行使用。这种方法接下来会相关的介绍；
c.React只更新有必要的元素
React DOM会与上一个元素进行比较，React DOM元素的更新只应用于有更新状态的DOM元素；
可以通过浏览器工具检查上个例子的变化进行验证；
