007.类式组件举个🌰 执行ReactDOM之后发生了啥 React解析㢟标签，找到了Demo组件发现组件是使用类定

举个🌰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <script type="text/babel">
        // 1.创建类式组件
        class Demo extends React.Component{
            render(){
                // render放在哪里的？ render方法放在类（Demo）的原型对象上，供实例使用
                // render中的this是谁？ Demo的实例对象/Demo组件实例对象
                return <h2>我是类式组件【复杂组件】</h2>
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))

        // 执行了ReactDOM.render后发生了什么
        // 1. React解析㢟标签，找到了Demo组件
        // 2. 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的方法
        // 3. 将render范湖的虚拟DOM转为真实DOM，随后呈现在页面上
    </script>

</body>
</html>

执行ReactDOM之后发生了啥

React解析㢟标签，找到了Demo组件
发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的方法
将render范湖的虚拟DOM转为真实DOM，随后呈现在页面上