React学习笔记3. 虚拟DOM的两种创建方式

使用jsx创建虚拟DOM：

<script type="text/babel" > /* 此处一定要写babel */
    // 1. 创建虚拟DOM
    const VDOM = <h1 id="title">Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
    // 2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

原生js创建真实的DOM：

<script type="text/javascript" > /* 此处一定要写babel */
    // 1. 创建虚拟DOM
    const VDOM = React.createElement('h1', {id: 'title'}, 'Hello,React')
    // 2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

jsx创建h1里面带span：

<script type="text/babel" > /* 此处一定要写babel */
    // 1. 创建虚拟DOM
    const VDOM = (
        <h1 id="title">
            <span>Hello,React</span>
        </h1>
    ) /* 此处一定不要写引号，因为不是字符串 */
    // 2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

js创建h1里面带span（比较麻烦）：

<script type="text/javascript" > /* 此处一定要写babel */
    // 1. 创建虚拟DOM
    const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello,React'));
    // 2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

标签：render,DOM,创建,笔记,React,虚拟,VDOM
来源： https://www.cnblogs.com/poetea/p/14399919.html