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元素；
可以通过浏览器工具检查上个例子的变化进行验证；