react 2种方式创建虚拟DOM

时间:2020-05-01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test1">

</div>

<div id="test2">

</div>

<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script src="js/prop-types.js"></script>

<script type="text/babel">
    // 定义变量
    let id = 'wyzda';
    let msg = 'hello wyzda';
    // 第一种方式创建虚拟dom
    let div1 = <h1 id={id}>{msg}</h1>;
    // 第二种方式创建虚拟dom
    let div2 = React.createElement('h2', {id: 'test'}, 'hello div2');
    // 渲染虚拟dom
    ReactDOM.render(div1, document.getElementById('test1'));
    ReactDOM.render(div2, document.getElementById('test2'));
</script>
</body>
</html>