react学习（4）

知识点

1：关于虚拟DOM

• 本质上是object对象，即一般对象。
• 虚拟dom比较‘轻’，真实dom比较'重'，因为虚拟dom是react内部在用，所以不需要像真实dom那样有那么多的属性。
• 虚拟dom，最终会被react转化为真实dom,展现在页面上。

 <script type="text/babel">
        const VDOM =(
            <h1>
                <span>hello,react</span>
            </h1>
        )
        console.log('虚拟dom',VDOM);
        console.log(VDOM instanceof Object);
        //直接打印的话，控制台输出的是标签。可以使用断点查看属性。
        console.log('真实dom',document.getElementById('test'));
        debugger;
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

2：JSX

• 全称：javascript XML
• react定义的一种类似于xml的js扩展语法:js+xml
• 本质上是React.createElement(component,props,...children)的语法糖。
• 作用：用来简化创建虚拟dom.
  a.写法：var ele = <h1>hello</h1>;
  b.注意它不是字符串，也不是html/xml标签。
  c.它最终生成的就是一个js对象。
• 标签名任意：html标签或其他标签。

3：XML
早期用于存储和传输数据。

<student>
  <name>tom</name>
  <age>18</age>
</student>

由于JSON的出现，我们现在使用JSON去传输和存储，加上js中内置的JSON对象身上有parse和stringfy这两个方法，parse帮我们把json字符串转为js对象，stringfy帮我们把js对象转为json字符串。